What is hydration?

Next.jsMiddle~1 min read

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)

The server sends ready HTML

html

<button>Click me</button>

The browser immediately shows the content (the page is visible, but "dead")
The JavaScript bundle loads
React:

matches the HTML with the Virtual DOM
attaches onClick, onChange, etc.

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>;
}