Errors / JavaScript errors

Error: Hydration failed because the server rendered HTML didn't match the client

The page the server sent and the page the browser built did not match, so the browser rebuilt it.

The page flashes or re-renders, loses the speed of server rendering, and sometimes shows the wrong content.

Why it happens

• Rendering something that differs between server and browser: a date or time, Math.random(), window or localStorage read during render.
• Invalid HTML nesting (a <div> inside a <p>), which the browser corrects before React compares.
• A browser extension or a third-party script changing the DOM before React hydrates.
• In production builds the message is short: Minified React error #418 or #423.

How to fix it

1. Move browser-only values into an effect, or render them only after mount.
2. Fix the HTML nesting the error or the dev build points at.
3. For one element that must differ (a timestamp), suppressHydrationWarning on that element.

Whose problem it is

Usually the site's own code or settings.