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

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

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

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

Контент

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

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

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

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

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

## Що таке 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 на клієнті:

1. Бере **вже готовий HTML**, що прийшов із сервера;
2. "Прив'язує" до нього свої **обробники подій** і **внутрішній стан**;
3. Перетворює статичну розмітку на **живий 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

1. Клієнт робить запит
-> `GET /page`

2. Сервер рендерить HTML через `renderToString()`
-> `<div id="root"><h1>Привіт!</h1></div>`

3. HTML одразу відправляється користувачу
-> Сторінка відображається (ще без інтерактивності)

4. JS-бандл завантажується
-> React викликає `hydrateRoot()`

5. 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 перетворює її з "плаката" на "живий застосунок".

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

Для рев’юера

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

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