Next.js Discord

Discord Forum

Error: Hydration failed because the initial UI does not match what was rendered on the server

Answered
Batimius posted this in #help-forum
Open in Discord
BatimiusOP
Hello there. For the past couple of hours, I've been coming across this error, and although my app does work, I am fairly certain it shouldn't come up. The error, as you can see from the title, is Error: Hydration failed because the initial UI does not match what was rendered on the server. I'll attach a screenshot of the error, as well as the my code. If anyone has any idea how to fix it, that would be helpful. Thank you for your time and help!
Answered by Batimius
Apparently, the <caption> tag is supposed to be RIGHT AFTER the <table> tag.
View full answer

13 Replies

Komondor
The server will render the components server side, serve them to the client, then hydrate the components on the client side. This error can happen when the structure on client side differs than the structure on server side. I'm guessing this is due to some conditional, or some scenario where something got evaluated differently on the server than on the client
Can you start removing conditional code until the error goes away, to narrow down the cause? Like try hard coding the song array in ComparisonPage and see if the error still comes up
@Komondor Can you start removing conditional code until the error goes away, to narrow down the cause? Like try hard coding the song array in ComparisonPage and see if the error still comes up
BatimiusOP
I started going down the ladder, and here is what I got:
• Making finalArray a pre-made array - No change
• Using a pre-made array for the songs props of the Results component (creating the array inside the React component and accessing it instead of the songs property) - No change
• Removing the songs property and using pre-made array inside the component - No change
• Commenting out the entire tbody loop and leaving an empty tbody - No change
• Commenting out the entirety of the table - Zero errors

After that, I started going up the ladder:
• Commenting out only the caption - Zero errors
• Removed pre-made array and substituted everything for the songs property (the songs property is a pre-made array) - Zero errors
• Removed pre-made array on the ComparisonPage and brought back code that fetches the data - Zero errors
So it looks like the <caption> element is the problematic child.
Still have no idea how I can fix this, but I'll mess around a bit to see what more info I can collect.
Somali
Remove the caption?
BatimiusOP
Figured it out.
BatimiusOP
Apparently, the <caption> tag is supposed to be RIGHT AFTER the <table> tag.
Answer
BatimiusOP
Although it works even if it isn't, Next.js doesn't like that.
Somali
Interesting, I’ll have to keep that in mind. Nice work getting to the bottom of it 👍🏻
@Somali Interesting, I’ll have to keep that in mind. Nice work getting to the bottom of it 👍🏻
BatimiusOP
I didn't know if this was my issue or a Next.js issue. Once someone suggested that I move through it, then it wasn't much of a process. Thanks! Now you know as well to avoid in case it happens to you.
Komondor
Huh that is weird. Thanks for posting the resolution!
@Komondor Huh that is weird. Thanks for posting the resolution!
BatimiusOP
Aye! Thank you for the heads up. If you didn't tell me to go line by line, I wouldn't have since I didn't think this was a "my issue" problem. Cheers!