Какие две основные задачи выполняет SSR-приложение?

SSR (Server-Side Rendering) — это подход, при котором HTML страницы формируется на сервере, а не в браузере. Но этим работа SSR-приложения не ограничивается: после отдачи HTML браузеру начинается второй этап, без которого страница осталась бы статичной картинкой.

Две основные задачи

• Рендеринг HTML на сервере. Сервер выполняет код приложения, получает данные и генерирует готовую разметку, которую сразу получает браузер.
• Гидратация на клиенте. Клиентский JavaScript загружается, «прикрепляется» к уже существующему DOM, восстанавливает состояние и навешивает обработчики событий.

Первая задача решает проблему пустого экрана и плохого SEO: поисковики и пользователи сразу видят контент. Вторая задача превращает статичную разметку в интерактивное приложение.

Пример на React

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

app.get('/', (req, res) => {
  const html = renderToString(<App />); // 1. рендер на сервере
  res.send(`<div id="root">${html}</div>`);
});

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

hydrateRoot(
  document.getElementById('root'),
  <App /> // 2. гидратация на клиенте
);

Без гидратации кнопки и формы не работали бы, а без серверного рендера пользователь видел бы белый экран до загрузки всего JS.

Итог: SSR применяют, когда важны быстрый первый рендер, SEO и при этом нужна полноценная интерактивность — например, в интернет-магазинах, новостных порталах и маркетплейсах.