Skip to main content

Що таке hydration у контексті SSR?

ReactJunior~2 хв читання
Запропонувати правку

Що таке hydration

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

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

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

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

  1. Сервер генерує готову HTML-сторінку (через renderToString() або renderToPipeableStream()):
javascript
<div id="root"> <button>Click me</button> </div>
  1. Браузер отримує HTML і одразу показує його користувачу - сторінка вже видима, але ще не інтерактивна (натискання на кнопку нічого не робить).
  2. JS-бандл завантажується і виконується на клієнті. React знову рендерить той самий компонент (віртуально) і зіставляє його з уже наявним HTML.
  3. Якщо структура збігається, 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-архітектур.

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

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

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

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