Suggest an editImprove this articleRefine the answer for “What is hydration?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Hydration** is the process in which **React "brings to life" the already-ready HTML** received from the server, **attaching JavaScript and event handlers to it**. **Key point:** hydration happens with SSR, SSG, and ISR, and Server Components in Next.js are not hydrated - only Client Components are.Shown above the full answer for quick recall.Answer (EN)Image**Hydration** is the process in which **React "brings to life" the already-ready HTML** received from the server, **attaching JavaScript and event handlers to it**. In short: > **HTML already exists → React attaches → the page becomes interactive** ## How hydration works (step by step) 1. The server sends **ready HTML** ```html <button>Click me</button> ``` 2. The browser **immediately shows the content** (the page is visible, but "dead") 3. The JavaScript bundle loads 4. React: - matches the HTML with the Virtual DOM - attaches `onClick`, `onChange`, etc. 5. The page becomes **interactive** ``` HTML → JS → hydrate → interactivity ``` --- ## Hydration vs Render | | Render | Hydration | |---|---|---| | Where | server | browser | | HTML | is created | already exists | | JS | No | Yes | | Events | No | Yes | | Interactivity | No | Yes | --- ## When hydration happens Hydration happens if: - **SSR** is used - **SSG** is used - **ISR** is used **There is no hydration** if: - plain HTML (without React) - an API response - middleware --- ## Hydration in the App Router In the App Router: - **Server Components are NOT hydrated** - **Client Components - are hydrated** ```txt Page (Server) ├─ Header (Server) no hydration ├─ Content (Server) no hydration └─ Chat (Client) with hydration ``` This is a key Next.js optimization. --- ## Client Component example (gets hydrated) ```tsx "use client"; export function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } ``` - the HTML arrives from the server - the JS attaches - the button starts working --- ## Hydration mismatch (a common error) ### What is it? When the HTML from the server **does not match** what React expects on the client. ### Causes: - `Math.random()` - `Date.now()` - `window`, `localStorage` - conditional rendering based on `typeof window` ```tsx // bad <div>{Math.random()}</div> ``` --- ## How to avoid hydration mismatch - move dynamic values into `useEffect` - use `use client` only where needed - check `mounted` - do not use browser-only APIs in Server Components --- ## Streaming and partial hydration Next.js can: - **stream HTML** - **hydrate components as JS loads** This: - speeds up the first screen - lowers TTI - improves UXFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.