Next.js Discord

Discord Forum

Hydration Error resource

Unanswered
Pond loach posted this in #help-forum
Open in Discord
Original message was deleted.

1 Reply

Roseate Spoonbill
There are couple of hydration errors possible. Most common are due to the differences of what server renders and what then react renders on browser.

Example:
Stoper app - server records start time and how much time passed since then. Client component is first rendered on server, and it shows 1.23s. Once browser receives this page and calculates the difference, the time will be 1.26s.

The same error can happen if client is the same as server, but one of browser extension modifies html after page is loaded - common examples are password vaults and grammarly which tend to add their won html elements and attributes to the page.