Що робить сервер до відправлення HTML клієнту?

ReactMiddle~2 хв читання

Загальний сценарій 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"><!-- SSR HTML вставляється сюди --></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 робить велику роботу:

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

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

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

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

Premium

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