Что такое SSR?

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

Как работает

При SSR сервер выполняет код приложения, формирует готовый HTML с контентом и отдаёт его. Браузер сразу показывает страницу, затем происходит гидратация — JavaScript «оживляет» разметку, навешивая обработчики.

SSR против CSR

• CSR — сервер отдаёт пустой <div id="root"> и бандл; контент рисует JS. Быстрый переход между страницами, но медленный первый показ и слабое SEO.
• SSR — сервер отдаёт готовый HTML. Быстрый первый контент и хорошее SEO, но нагрузка на сервер выше.

Плюсы SSR

• Быстрый First Contentful Paint — контент виден сразу.
• SEO — поисковики получают заполненный HTML.
• Лучше на слабых устройствах — меньше работы в браузере.

Минусы SSR

• Нагрузка на сервер (рендер на каждый запрос).
• Сложнее инфраструктура; часть браузерных API недоступна на сервере.
• Задержка до интерактивности (TTI) из-за гидратации.

Инструменты

Next.js, Nuxt, Remix. Есть также SSG (генерация на этапе сборки) и streaming SSR.

Коротко для собеседования

SSR — генерация HTML на сервере для быстрого первого показа и SEO, затем гидратация в браузере. Против CSR: лучше FCP и SEO ценой нагрузки на сервер. Реализуется через Next.js/Nuxt/Remix.