Серверный рендеринг (SSR) — это техника, при которой первое отображение веб-страницы происходит на сервере, а не в браузере пользователя.
При обычном клиентском рендеринге браузер получает пустой HTML-файл с ссылкой на JavaScript. Браузер загружает JavaScript, парсит его, выполняет и только потом динамически строит DOM и отображает содержимое.
При SSR сервер обрабатывает компоненты приложения, формирует готовый HTML-код и отправляет его браузеру.
Этапы SSR:
- Запрос: Пользовательский браузер отправляет HTTP-запрос на сервер.
- Рендеринг на сервере: Сервер запускает JavaScript-код приложения, включая логику рендеринга UI-компонентов, и получает полностью сформированный HTML-строку.
- Ответ: Сервер отправляет этот HTML-файл браузеру.
- Первичное отображение: Браузер получает HTML и сразу отображает содержимое страницы, так как все элементы уже присутствуют в разметке.
- Гидратация (Hydration): После загрузки HTML браузер загружает и выполняет JavaScript-код приложения. Этот код "оживляет" статичную разметку, добавляя интерактивность, обработчики событий и привязывая состояние.
Преимущества SSR:
- Улучшенное SEO: Поисковые роботы лучше индексируют страницы с полностью сформированным HTML.
- Более быстрая первая отрисовка (FCP - First Contentful Paint): Пользователь видит содержимое страницы быстрее.
- Улучшенный доступ для слабых устройств и медленного интернета: Меньше зависимости от производительности клиентского устройства для отображения основного контента.
Недостатки SSR:
- Повышенная нагрузка на сервер: Сервер выполняет больше вычислений для рендеринга.
- Сложность разработки: Требуется учитывать изоморфность кода (возможность выполнения как на сервере, так и на клиенте).
- Больший размер ответа: Первый ответ сервера содержит полный HTML.
javascript