Hydration is the process where React attaches event listeners to the static HTML sent by the server, making the page interactive.
Interactive Simulation Engine
Hydration Simulation
From static HTML to interactive React
Server HTML
Read-only Snapshot
Event listeners: NULL
Browser JS
React Runtime
Initial HTML is visible but 'dead'. Clicking buttons does nothing yet.
Executable Code Workbench
page.tsx
Live Code Editor1'use client'
2import { useState } from 'react'
3
4export default function Counter() {
5 const [count, setCount] = useState(0)
6 // Hydration makes this button work
7 return <button onClick={() => setCount(count + 1)}>{count}</button>
8}Mental Model
Think of a dry sponge (HTML). It has the shape of a sponge but isn't 'active'. Adding water (React/JS) makes it flexible and usable.
Why This Exists
To provide the best of both worlds: fast initial SEO-friendly HTML from the server, and rich interactivity from React in the browser.
Critical Note
"Hydration is a second render. It's actually a process of 'reconciling' the existing DOM with the React component tree."