Кто выполняет рендеринг HTML при SSR?

При SSR важно разделять два этапа: “сгенерировать HTML” и “сделать интерфейс интерактивным”.

1) Кто именно генерирует HTML

Определение: SSR (Server-Side Rendering) — подход, при котором HTML страницы генерируется на сервере, а не строится целиком в браузере из JavaScript.

1. HTML рендерит сервер:

   • сервер запускает код приложения (например, рендер React-компонентов в строку HTML)

   • подставляет данные (часто полученные до рендера)

2. Браузер на этом этапе просто получает HTML и парсит его как обычную страницу.

2) Что делает браузер после получения SSR HTML

Браузер сначала отображает страницу “как есть”, но без полноценной интерактивности.

1. Парсит HTML, строит DOM и отображает контент.

2. Загружает JS-бандлы приложения.

3. Выполняет “оживление” (hydration).

Определение: Hydration — процесс, когда клиентский JavaScript “подхватывает” уже отрендеренный HTML, связывает его с компонентами и добавляет обработчики событий.

3) Почему SSR не равен “всё готово”

SSR ускоряет появление контента, но интерактивность появляется после загрузки JS.

1. До hydration:

   • элементы видны

   • обработчики кликов/инпутов могут не работать или работать частично (зависит от фреймворка и режима)

2. После hydration:

   • React/Next “сопоставляет” существующий DOM и виртуальное дерево

   • подключаются события, состояние, эффекты

4) Мини-пример: идея SSR + hydration

// Сервер: генерирует HTML из компонентов (условно)
const html = renderToString(<App />); // HTML строка
// Клиент: "оживляет" HTML (условно)
hydrateRoot(document.getElementById('root'), <App />);

5) Практический смысл для фронтенда

1. Плюсы:

   • быстрее появляется контент (первая отрисовка)

   • лучше индексируется (SEO)

2. Минусы:

   • больше работы на сервере

   • сложнее кеширование и диагностика

   • возможны ошибки несоответствия (mismatch), если сервер и клиент рендерят по-разному

Вывод: HTML при SSR рендерит сервер. Браузер затем делает hydration, чтобы страница стала интерактивной, поэтому SSR обычно даёт выигрыш в “первом показе”, но не отменяет необходимость клиентского JS.