Next.js Discord

Discord Forum

Hydration mismatch - Header moving after hydration

Answered
Floh posted this in #help-forum
Open in Discord
FlohOP
My page seems to not load the header or footer at first, then after about 0.5s loads it in the wrong structure.

I also get 3 hydration mismatch errors.

This is my layout:
return (
    <html lang='en'>
      <Header />
      <body className={`bg-gray-900 ${inter.className}`}>{children}</body>
      <Footer />
    </html>
  );


It loads as in the image
Answered by riský
you should always put your content inside body or head (there are some exceptions...), in this case Header and Footer should be in body
View full answer

4 Replies

riský
you should always put your content inside body or head (there are some exceptions...), in this case Header and Footer should be in body
Answer
FlohOP
That looks to have solved it! Thanks!
Weird I never had this problem before
riský
yea react hydration follows the rules but browsers are kinda nice about it