React
React hydration failed because server and client output differed
Hydration failed because the server rendered output did not match the client.
React detected a server-rendered tree that did not match the client render, so hydration failed and the subtree had to be regenerated on the client.
Observed message
Hydration failed because the server rendered output did not match the client.
Why it happens
- The client and server render different values because of Date.now, Math.random, or locale formatting differences.
- The component contains a server/client branch such as typeof window checks inside a render path.
- External data changed between server render and client hydration.
- The rendered HTML is structurally invalid or was modified before React loaded.
How to fix it
- Remove unstable values from the render path or send a stable snapshot to the client.
- Move browser-only logic into effects or client-only components.
- Validate the rendered markup and fix any invalid nesting.
- Check extensions or scripts that may mutate HTML before hydration completes.
