Що означає "SSR + Hydration"?

ReactJunior~3 хв читання

Що таке SSR (Server-Side Rendering)

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

Приклад (спрощено):

Без SSR (звичайний SPA):

javascript

Клієнт -> отримує index.html з порожнім <div id="root"></div>
         v
Завантажується bundle.js
         v
React рендерить увесь UI на клієнті

Користувач бачить "білий екран" до завантаження JS.

З SSR:

javascript

Сервер -> запускає React і рендерить HTML (сторінка вже готова)
         v
Відправляє клієнту готовий HTML

Браузер одразу показує контент (швидший first paint). Потім підключається JS, і сторінка стає інтерактивною. Ось це "оживлення" називається Hydration.

Що таке Hydration (гідратація)

Hydration - це процес, коли React на клієнті:

Бере вже готовий HTML, що прийшов із сервера;
"Прив'язує" до нього свої обробники подій і внутрішній стан;
Перетворює статичну розмітку на живий React-застосунок.

Простіше кажучи:

SSR -> "будуємо будинок" (HTML) Hydration -> "підключаємо електрику і воду" (JS-інтерактивність)

Приклад на React / Next.js

Сервер (Node.js) робить:

javascript

import { renderToString } from 'react-dom/server';
import App from './App';

const html = renderToString(<App />);
return `
  <html>
    <body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body>
  </html>
`;

Клієнт (браузер) робить:

javascript

import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

Сервер віддав готовий HTML (renderToString);
Клієнт "гідратував" (hydrateRoot) той самий React-код, відновивши стан і прив'язавши обробники (onClick, onChange тощо).

Як React "дізнається", що потрібно гідратувати

Коли React викликає hydrateRoot(), він порівнює віртуальне дерево компонентів (Virtual DOM) з наявною HTML-розміткою.

Якщо структура збігається, React просто додає інтерактивність (жодних змін DOM).

Якщо структура відрізняється, React видає попередження і перерендерює ділянку (reconciliation).

Навіщо потрібні SSR + Hydration

Мета	Пояснення
Швидший перший рендер (First Paint)	Користувач бачить контент одразу, не чекаючи завантаження JS
SEO-оптимізація	Пошуковики бачать готовий HTML
Покращений UX	Сторінка виглядає "готовою" з перших мілісекунд
Кешування HTML	Можна кешувати сторінки на CDN
Поступова інтерактивність	React оживляє елементи в міру завантаження

SSR vs CSR vs SSG

Підхід	Де рендериться UI	Коли генерується	Приклад
CSR (Client-Side Rendering)	У браузері	Після завантаження JS	Create React App
SSR (Server-Side Rendering)	На сервері	При кожному запиті	Next.js `getServerSideProps`
SSG (Static Site Generation)	На сервері (на етапі збірки)	Один раз	Next.js `getStaticProps`

У всіх випадках Hydration використовується однаково - JS "оживляє" вже готову HTML-структуру.

Візуальна послідовність SSR + Hydration

Клієнт робить запит -> GET /page
Сервер рендерить HTML через renderToString() -> <div id="root"><h1>Привіт!</h1></div>
HTML одразу відправляється користувачу -> Сторінка відображається (ще без інтерактивності)
JS-бандл завантажується -> React викликає hydrateRoot()
React зв'язує DOM і Virtual DOM -> Усе стає інтерактивним

Потенційні проблеми Hydration

Іноді "гідратація" може спричинити баги:

Розмітка на сервері не збігається з клієнтською (наприклад, при використанні window, Math.random() у SSR);
Компоненти залежать від браузерних API (localStorage, viewport тощо);
Неконсистентні дані між сервером і клієнтом.

Рішення:

Використовуй useEffect для коду, який повинен виконуватися тільки на клієнті;
Уникай генерації випадкових даних при SSR без фіксації;
У Next.js можна використати dynamic(() => import(...), { ssr: false }) для суто клієнтських компонентів.

React 18 і "часткова" гідратація (Streaming SSR)

React 18 покращив SSR - тепер можлива:

Потокова (streaming) SSR - HTML відправляється частинами в міру готовності;
Selective Hydration - React "оживляє" тільки потрібні частини UI в міру завантаження JS.

Це робить SSR-застосунки ще швидшими і чутливішими.

Підсумок

Термін	Що робить
SSR (Server-Side Rendering)	Рендерить React-компоненти в HTML на сервері
Hydration	"Оживляє" цей HTML, додаючи інтерактивність на клієнті
Мета	Швидкий перший рендер + SEO + інтерактивність
Реалізація	`renderToString()` -> `hydrateRoot()`
Сучасна версія	Streaming SSR + Selective Hydration (React 18)

Простими словами:

SSR робить сторінку видимою миттєво, а Hydration перетворює її з "плаката" на "живий застосунок".

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

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

Premium

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