Server-side pre-rendered HTML differs from the initial client-side React render tree.
In SSR frameworks like Next.js, React renders HTML on the server first, then 'hydrates' it in the browser. If the client DOM generated on initial render differs from the server HTML, React throws a Hydration Mismatch warning.
Occurs when using non-deterministic operations (`Date.now()`, `Math.random()`), checking `window` or `localStorage` during initial render, or invalid HTML nesting (such as nesting `<p>` inside another `<p>` or `<div>` inside `<p>`).
1export default function Clock() {2 // Rendered with different timestamps on server vs client!3 return <div>Current Time: {new Date().toLocaleTimeString()}</div>;4}1'use client';2import { useState, useEffect } from 'react';3 4export default function Clock() {5 const [time, setTime] = useState<string | null>(null);6 7 useEffect(() => {8 setTime(new Date().toLocaleTimeString());9 }, []);10 11 // Guard until client hydration finishes12 if (!time) return <div>Loading time...</div>;13 14 return <div>Current Time: {time}</div>;15}Simulate standard system builds to trigger compiler trace records and track memory crashes locally.
The server generates HTML with its local clock time. By the time the JavaScript bundle executes in the user's browser, `toLocaleTimeString()` returns a different second/minute, causing the rendered DOM node text to mismatch.