hydration error confused
Answered
American black bear posted this in #help-forum
American black bearOP
hello, ive read multiple articles about hydration and hydration errors, but im confused about some points, first of all :
- for example if the server send an HTML that use the variable "user_image" how is it possible to have a client rendered HTML with the same variable but diffrent value, where did it came from ? doesnt it come from the server? it should have the same value
- for example if the server send an HTML that use the variable "user_image" how is it possible to have a client rendered HTML with the same variable but diffrent value, where did it came from ? doesnt it come from the server? it should have the same value
Answered by Giant panda
The code runs on the server first and the raw output gets sent to the client.
Next, the client does the same initial render pass without running effects.
These outputs must match; otherwise, you have a hydration error.
Finally the JS gets enabled running hooks and logic once the component has been mounted.
Next, the client does the same initial render pass without running effects.
These outputs must match; otherwise, you have a hydration error.
Finally the JS gets enabled running hooks and logic once the component has been mounted.
30 Replies
Giant panda
You can't discuss this without a very concrete example.
Hydration errors most notably occur when dealing with dates that are formatted differently on the server compared to the client.
While you have a
Date object for a specific point in time the server might format it differently and thus there is a mismatch if the client displays it differently compared to the server.Other examples include invalid nesting of HTML elements.
@Giant panda You can't discuss this without a very concrete example.
American black bearOP
im currently working with zustand
i heard someone saying that using "persist" may cause hydration error
but the local storage is handled on the client
so the components are client rendered
Giant panda
Because persistence is done using localStorage so the server would see an empty store while the client will not
Which is a mismatch
I don't know the implementation details of zustand and whether they have suggestions how to handle SSR
But typically you'd either move logic like this into an effect
To handle it after rendering on the client
Or just make the component dynamic without SSR at all
@Giant panda Because persistence is done using localStorage so the server would see an empty store while the client will not
American black bearOP
wdym "the server would see an empty store" can you please give me a psuedo code example ?
Giant panda
const store = useStore()
return <>{store.items.length} Items</>If the store is persisted in the local storage the server sees no items
On the client there are items which renders a different result
American black bearOP
i see i think i started understanding
Giant panda
The docs go into detail how to use it with Next: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#usage-in-nextjs
American black bearOP
one last thing, is my understaing to hydration proccese correct ?
1 - server send HTML, CSS, JavaSript
2 - client run the javascript to update the html
3 - if there is a mismatch between the server dynamic data and the javascript, a hydration error occure
1 - server send HTML, CSS, JavaSript
2 - client run the javascript to update the html
3 - if there is a mismatch between the server dynamic data and the javascript, a hydration error occure
Giant panda
It's not the whole picture and misses some details but it's partially right
@Giant panda The docs go into detail how to use it with Next: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#usage-in-nextjs
American black bearOP
oh they mentioned that here
@Giant panda It's not the whole picture and misses some details but it's partially right
American black bearOP
what are those details
how does the hydration do behind the scene
Giant panda
The code runs on the server first and the raw output gets sent to the client.
Next, the client does the same initial render pass without running effects.
These outputs must match; otherwise, you have a hydration error.
Finally the JS gets enabled running hooks and logic once the component has been mounted.
Next, the client does the same initial render pass without running effects.
These outputs must match; otherwise, you have a hydration error.
Finally the JS gets enabled running hooks and logic once the component has been mounted.
Answer
@Giant panda The code runs on the server first and the raw output gets sent to the client.
Next, the client does the same initial render pass *without running effects*.
These outputs must match; otherwise, you have a hydration error.
Finally the JS gets enabled running hooks and logic once the component has been mounted.
American black bearOP
what does the client use to render ? does it just take the server sent html and re-render it ?
Giant panda
It just runs the same code without effects and doesn't technically reuse the server output, it just checks whether they match.
The details are not relevant.
@Giant panda It just runs the same code without effects and doesn't technically reuse the server output, it just checks whether they match.
American black bearOP
i see, thx for help