Hydration failed because the server rendered HTML didn't match the client
- React
- Next.js
What it means
The page the server sent and the page the browser then drew were different, so React threw the server's version away. Usually something depends on the time, the time zone or randomness.
Why it happens
- Dates or times formatted on the server (in UTC) and in the browser (local time).
- Random values or Date.now() used while rendering.
- Reading window or localStorage during the first render.
- Invalid HTML nesting, like a div inside a p, or a browser extension changing the page.
How to fix it
- Format dates with an explicit time zone, or only in the browser after the page loads.
- Move browser-only values into an effect that runs after the first render.
- Fix invalid nesting reported in the error's details.
Let your AI find the cause
Paste this into Claude Code, Cursor, Lovable or whichever AI built your app. It looks first and changes nothing until you have read the answer.
My app shows a React 'Hydration failed' error. Without changing anything yet, find components that render dates, times, random values or browser-only data during the first render, and tell me which one most likely differs between server and browser.