JavaScript

Hydration failed (React / Next.js)

The HTML the server rendered didn't match what React produced on the client.

What it looks like

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Text content did not match. Server: "10:41" Client: "10:42"

What does "Hydration failed (React / Next.js)" mean?

Shown in the browser console by React (and Next.js) while attaching to server-rendered HTML. React throws the server HTML away and re-renders on the client, which costs speed and can cause visible flicker.

What causes "Hydration failed (React / Next.js)"?

• Rendering Date/Math.random/locale-specific output that differs server vs client.
• Invalid HTML nesting (e.g. div inside p).
• Browser-only APIs used during render.

How do I confirm the cause?

1. Read the warning’s Server and Client values — they show exactly which text or attribute differed.
2. Look for values that change between server and client: dates, times, Math.random(), locale formatting, or checks on window or localStorage.
3. Check the HTML is valid — a <div> inside a <p>, or a <table> without <tbody>, is repaired by the browser differently from React.

How do I fix "Hydration failed (React / Next.js)"?

• Make server and client render identically (avoid time/random in render).
• Fix invalid HTML nesting.
• Move browser-only code into useEffect.

How do I stop it happening again?

• Render time-dependent or browser-only values after mount (in useEffect) or from data passed in by the server.
• Keep server and client rendering code identical in input; pass the same props to both.

Got a different error? Paste it into the Explain This Error tool → Identifies the family and the fix — runs locally, nothing uploaded.

Related errors