The server-rendered HTML doesn't match the client-rendered output (e.g., using new Date() or Math.random()).
Interactive Simulation Engine
Hydration Mismatch Diagnostic
Server vs. Client Tree Conflict
Server-side HTML
<div>
<p>Generated: 10:00:05</p>
</div>
Client-side HTML
<div>
<p>Generated: 10:00:05</p>
</div>
The Problem: When you use dynamic values (Time, Random numbers) directly in your component, the server produces one value, but by the time the client runs, the value has changed.
Executable Code Workbench
page.tsx
Live Code Editor1// ❌ WRONG: Value changes between server & client
2export default function Page() {
3 return <p>{new Date().toLocaleTimeString()}</p>
4}
5
6// ✅ CORRECT: Wrap in useEffect
7export default function Page() {
8 const [time, setTime] = useState(null)
9 useEffect(() => setTime(new Date().toLocaleTimeString()), [])
10 return <p>{time}</p>
11}Mental Model
Use 'useEffect' to set state after hydration, or use 'suppressHydrationWarning' for specific elements.
Why This Exists
To protect the integrity of the rendering lifecycle and ensure your application remains stable across different environments.
Critical Note
"Errors in Next.js aren't just bugs; they are often the framework enforcing strict architectural safety rules to prevent security leaks or performance regressions."