Що таке hydration?

Next.jsMiddle~1 хв читання

Hydration (гідратація) - це процес, при якому React «оживляє» вже готовий HTML, отриманий із сервера, підключаючи до нього JavaScript і обробники подій.

Простіше:

HTML вже є → React підключається → сторінка стає інтерактивною

Як працює hydration (по кроках)

Сервер віддає готовий HTML

html

<button>Click me</button>

Браузер одразу показує контент (сторінка видна, але «мертва»)
Завантажується JavaScript-бандл
React:

зіставляє HTML з Virtual DOM
навішує onClick, onChange тощо

Сторінка стає інтерактивною

HTML → JS → hydrate → interactivity

Hydration vs Render

	Render	Hydration
Де	сервер	браузер
HTML	створюється	вже є
JS	Ні	Так
Події	Ні	Так
Інтерактивність	Ні	Так

Коли відбувається hydration

Hydration є, якщо:

використовується SSR
використовується SSG
використовується ISR

Немає hydration, якщо:

чистий HTML (без React)
API response
middleware

Hydration в App Router

У App Router:

Server Components НЕ гідратуються
Client Components - гідратуються

txt

Page (Server)
 ├─ Header (Server)   без hydration
 ├─ Content (Server)  без hydration
 └─ Chat (Client)     з hydration

Це ключова оптимізація Next.js.

Приклад Client Component (гідратується)

tsx

"use client";

export function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

HTML прийде з сервера
JS підключиться
кнопка почне працювати

Hydration mismatch (часта помилка)

Що це?

Коли HTML від сервера не збігається з тим, що React очікує на клієнті.

Причини:

Math.random()
Date.now()
window, localStorage
умовний рендер за typeof window

tsx

// погано
<div>{Math.random()}</div>

Як уникнути hydration mismatch

виносити динаміку в useEffect
використовувати use client лише там, де потрібно
перевіряти mounted
не використовувати browser-only API в Server Components

Streaming і partial hydration

Next.js вміє:

стрімити HTML
гідратувати компоненти в міру завантаження JS

Це:

прискорює перший екран
знижує TTI
покращує UX

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.