Next.js Discord

Discord Forum

hydration failed issue

Answered
Stony gall posted this in #help-forum
Open in Discord
Stony gallOP
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client.
Answered by luis_llanes
The Server Rendered HTML is filled with different data from the translations I assume
View full answer

11 Replies

That might happen for a couple reasons, can we get a little more context?

- might be for a date that’s different when rendered on the server and hydrated on the client
- you’re conditionally rendering based on the environment you’re in

Remember a component should be pure, it should always return the same output given the same input.

Client components run first on the server, the HTML is sent to the client along the JavaScript bundle to run again and hydrate. Effectively re rendering the component on the client, this error happens when both output trees compare and don’t match
Are you using one of these APIs?:
-Date.now()
-Math.random()
-Or the window object
Stony gallOP
No , here is my component :
The Server Rendered HTML is filled with different data from the translations I assume
Answer
@B33fb0n3 <@1263147378462949389> read this: https://discord.com/channels/752553802359505017/1316968439793057872
Stony gallOP
I did that. I was thinking that the problem might be with the browsers, but it is not
@luis_llanes
@B33fb0n3
thank you very much