Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

4
  • Thank you for the explanation, but the thing that I don't understand is why is the server even trying to render my client component. My understanding is that, if I write 'use client' on top of the component, then the server would skip the rendering part, because he will know, that it is addressed only to client and not the server, so the ssr would be disabled at this point. Commented Oct 11, 2024 at 11:12
  • Also I just noticed, that if I remove the part where the products are rendering based of the state of my cart which is using react-persist, there is no hydration error even though I have a number changing in my header based of the number of products in my cart, so now I am completely confused, why is this not triggering the hydration error and the other one does. Commented Oct 11, 2024 at 11:46
  • Okay got it, it was because I was using conditional rendering there, so for anyone reading this and was confused as I was, it doesn't matter if the text in the elements changes based of your state in redux-state (there would only be warning), but you can't use conditional rendering based of that state, because it would change the application structure so there comes the hydratation error. Commented Oct 11, 2024 at 11:54
  • Your Client Components will always render on the server when a user first visits the page. If only the RSC would run on the server, there wouldn't be any HTML to ship to the browser. There is a distinction between RSC and SSR of Client Components, and both of these steps happen. Commented Oct 11, 2024 at 12:28