Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке hydration у контексті SSR?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке hydration

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

Іншими словами:

> SSR створює **готовий HTML**, а **hydration** перетворює цей HTML на **справжній React-застосунок** на клієнті.

---

## Як працює процес крок за кроком

1. **Сервер** генерує готову HTML-сторінку (через `renderToString()` або `renderToPipeableStream()`):

```javascript
  <div id="root">
    <button>Click me</button>
  </div>
  ```
2. **Браузер отримує HTML** і одразу показує його користувачу - сторінка вже видима, але **ще не інтерактивна** (натискання на кнопку нічого не робить).
3. **JS-бандл завантажується** і виконується на клієнті.
React знову рендерить той самий компонент (віртуально) і **зіставляє** його з уже наявним HTML.
4. Якщо структура збігається, React **прив'язує обробники подій** і активує стан компонентів - сторінка стає "живою".
Це і є **hydration**.

---

## Аналогія

Уяви, що SSR створює "статую" (готовий HTML),
а hydration "вдихає в неї життя" (додає JS-поведінку).

---

## Приклад у React

```javascript
// Сервер
import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);
res.send(`<div id="root">${html}</div>`);

// Клієнт
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);
```

- Сервер створює HTML (`renderToString`).
- Клієнт викликає `hydrateRoot()`, щоб **прив'язати React-логіку** до вже готового DOM.

---

## Чому це важливо

Hydration дозволяє:

- користувачу **одразу бачити контент** (SSR-рендерінг),
- але при цьому мати **інтерактивність** (клієнтська логіка React).

Без гідрації SSR-сторінка була б просто статичним HTML - "німа" і "мертва".

---

## Проблеми, пов'язані з hydration

### 1. **Невідповідність HTML**

Якщо HTML на сервері != HTML на клієнті - React покаже помилку:

> `Hydration failed because the initial UI does not match what was rendered on the server.`

Причини:

- використання `Math.random()`, `Date.now()` тощо;
- умовний рендерінг, що залежить від `window`, `localStorage`, `navigator` тощо;
- різниця даних між сервером і клієнтом.

---

### 2. **Тривалий процес гідрації**

Hydration вимагає **повторного обходу всього DOM** і зв'язування подій.
На великих сторінках це може зайняти **сотні мілісекунд** -> UI "висить" без реакції.

Рішення - **partial / selective hydration** (гідрація по частинах або по події).

---

### 3. **Затримка інтерактивності**

До завершення гідрації кнопки і форми можуть бути неактивні.
Тому сучасні фреймворки (Next.js, React 18, Qwik, Astro) використовують:

- **Streaming SSR** - HTML приходить частинами, одразу рендериться.
- **Partial Hydration** - активуються тільки потрібні ділянки.
- **Resumability (Qwik)** - взагалі уникає гідрації.

---

## Порівняння станів сторінки

| Етап | Що бачить користувач | Що відбувається |
|---|---|---|
| SSR-рендер | Контент відображено | HTML від сервера без JS |
| Hydration | Контент відображено | React підключає JS-логіку |
| Після гідрації | Контент інтерактивний | Повноцінний SPA працює |

---

## Висновок

**Hydration - це міст між серверним рендерінгом і клієнтською інтерактивністю.**

- SSR робить HTML видимим миттєво.
- Hydration "оживляє" цей HTML, додаючи поведінку React.
- Помилки і затримки при гідрації - одна з головних технічних проблем SSR-архітектур.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати469 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.