Серверный рендеринг (SSR) — это процесс, при котором веб-страница генерируется на сервере в ответ на запрос клиента. Вместо того чтобы отправлять клиенту пустой HTML-документ и JavaScript-бандл для последующего рендеринга в браузере, сервер формирует полный HTML-документ с уже вставленным контентом.
Преимущества SSR:
- SEO-оптимизация: Поисковые роботы легче индексируют контент, поскольку им предоставляется готовый HTML, а не динамически генерируемый JavaScript.
- Время первой отрисовки (FCP): Пользователь быстрее видит контент страницы, так как сервер уже предоставил готовый HTML, который браузер может сразу отобразить.
- Производительность на слабых устройствах: Менее ресурсоемко для клиентского устройства, так как основная работа по генерации страницы выполнена на сервере.
- Улучшенное взаимодействие в социальных сетях: Социальные сети при репосте получают готовый контент для превью, а не пустую страницу.
Недостатки SSR:
- Увеличение нагрузки на сервер: Сервер должен обрабатывать запросы на рендеринг каждой страницы, что может быть затратно по ресурсам.
- Снижение интерактивности до гидратации: После получения HTML-документа браузеру требуется время для "гидратации" — привязки JavaScript-логики к уже отображенному DOM. До завершения гидратации страница может быть частично или полностью неинтерактивной.
- Усложнение разработки: Требует определенной архитектуры приложения и специальных фреймворков (например, Next.js для React, Nuxt.js для Vue.js, Angular Universal для Angular).
При SSR клиент отправляет запрос на сервер, сервер обрабатывает его, генерирует HTML-строку, содержащую готовый контент и разметку, и отправляет ее обратно клиенту. Браузер отображает полученный HTML, а затем загружает и исполняет клиентский JavaScript для добавления интерактивности (процесс гидратации).