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

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

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

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

Контент

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

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

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

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

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

## Загальний сценарій SSR-запиту

Коли користувач відкриває сторінку (наприклад, `/products/42`), сервер виконує **кілька стадій** перед тим, як повернути готовий HTML.

---

## 1. Приймає HTTP-запит

Браузер відправляє:

```javascript
GET /products/42 HTTP/1.1
Host: example.com
Accept: text/html
```

Сервер отримує цей запит (через Node.js, Express, NestJS, Next.js тощо)
і починає визначати:

- який роут (сторінка) потрібен,
- які дані потрібні для неї,
- які заголовки і куки передані (наприклад, токен сесії, мова, тема).

---

## 2. Визначає маршрут і завантажує сторінку застосунку

Фреймворк (наприклад, **Next.js**) визначає:

- який **React-компонент** відповідає за цей шлях,
- які функції потрібно викликати до рендерингу (`getServerSideProps`, `loadData` тощо).

Це стадія маршрутизації і підготовки.

---

## 3. Виконує завантаження даних (data fetching)

Перед рендерингом сервер робить усе потрібне для заповнення сторінки актуальним контентом:

- Звертається до **бази даних** (через Prisma, Sequelize тощо),
- Робить **HTTP-запити** до API,
- Читає **cookie / JWT**, щоб визначити користувача,
- Може підтягнути **персоналізовані дані** (кошик, мову, профіль).

Результати цих операцій перетворюються на props для React-компонентів.

Це зазвичай найбільш "дорога" стадія за часом - кожна зовнішня API-операція затримує рендеринг HTML.

---

## 4. Рендерить React-компоненти на сервері

Коли дані готові, сервер викликає **React-рендерер**, наприклад:

```javascript
import { renderToString } from "react-dom/server";
const html = renderToString(<App pageProps={data} />);
```

На цьому кроці:

- React створює віртуальне DOM-дерево,
- "малює" відповідний HTML-код,
- формує рядок із готовою розміткою.

Результат - **HTML-фрагмент**, який можна одразу вставити в шаблон сторінки.

---

## 5. Збирає HTML-документ

Сервер вставляє отриману розмітку в загальний layout:

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Product 42</title>
    <meta name="description" content="Premium linen shirt" />
    <link rel="stylesheet" href="/styles.css" />
    <script defer src="/client.js"></script>
    <script>
      window.__INITIAL_DATA__ = {...}; // передача даних клієнту
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

Також сервер:

- додає **SEO-теги і метадані**,
- вбудовує **початкові дані (initial state)**,
- підключає **CSS / JS-бандли**, щоб клієнт зміг гідрувати сторінку.

---

## 6. (Опційно) Стискає і кешує відповідь

Перед відправленням сервер може:

- стиснути HTML через **Gzip чи Brotli**,
- покласти його в **кеш (Redis, CDN, edge-cache)** для прискорення наступних запитів,
- додати заголовки на кшталт `Cache-Control`, `ETag`, `Set-Cookie`.

---

## 7. Відправляє готовий HTML клієнту

Коли все готово, сервер відправляє відповідь:

```javascript
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Encoding: br
```

А тіло відповіді - повністю згенерований HTML.

---

## 8. Що відбувається на клієнті після цього

- Браузер **відображає HTML** -> користувач бачить контент.
- Потім завантажуються JS-бандли.
- Запускається **hydration** - клієнтський React зв'язує логіку і робить сторінку інтерактивною.

---

## Візуальне представлення пайплайна SSR

```javascript
[Запит] -> [Визначення маршруту]
          -> [Завантаження даних]
          -> [Рендер React на сервері]
          -> [Збірка HTML + дані]
          -> [Стискання і кешування]
          -> [Відповідь із HTML -> Браузер]
```

---

## Висновок

Перед тим як відправити HTML клієнту, **сервер у SSR робить велику роботу**:

1. Визначає потрібну сторінку і маршрут,
2. Завантажує всі дані,
3. Рендерить React-компоненти в HTML,
4. Вбудовує дані і підключає JS/CSS,
5. Стискає і відправляє результат.

> Тому SSR-сторінки відображають контент одразу,
> але вимагають більше ресурсів і часу на боці сервера.

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

Для рев’юера

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

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