I recently was creating a new Nextjs application and I ran into a problem whereif I refreshed the page manually on the keyboard Nextjs would start screaming atme and my console was full of error messages. Like the below:
It tells you that this sort of error occurs when some code on your page is relying on something that could differ between pre-rendering and the browser.
It turns out it was a React Hydration Error. After a bit of googling I stumbled upon this page: https://nextjs.org/docs/messages/react-hydration-error
. It tells you that this sort of error occurs when some code on your page is relying on something that could differ between pre-rendering and the browser. This is connected with server-side-rendering (SSR) and if you don’t take the time to sit down and understand it properly it will no doubt catch you out at some point (like it just did for me!!).
There is this article
from Josh Comeau
who does a great job of explaining why this error occurs and what you can do to resolve it. There is also the same solution found in this Github Issue
on the Nextjs Github Repo.
I have to say that Josh Comeau’s analogy with the cereal box in his article really helped illustrate the point for me. Cereal boxes can be printed way in advance (static non personal content) and then when the cereal is actually put in the box the ‘sell by date’ can be printed on the box (dynamic content).