Как Server-Side Rendering решает минусы SPA?

SSR решает минусы SPA: медленный первый показ (отдаёт готовый HTML сразу), слабое SEO (контент в HTML для роботов), плохую производительность на слабых устройствах (меньше работы в браузере при первой загрузке).

Минусы SPA, которые решает SSR

Медленный первый показ (FCP)

• SPA: браузер грузит пустой HTML, затем бандл JS, выполняет его — контент появляется поздно.
• SSR решает: сервер отдаёт готовый HTML с контентом → пользователь видит страницу сразу, до загрузки/выполнения JS.

SPA: пустая страница → ждём JS → контент
SSR: готовый HTML сразу → контент виден мгновенно

Слабое SEO

• SPA: краулеры получают пустой HTML (контент рисует JS) → плохая индексация.
• SSR решает: роботы получают заполненный HTML с контентом → хорошая индексация, корректные превью (Open Graph).

Производительность на слабых устройствах

• SPA: много JS-работы в браузере при первой загрузке → тормозит на слабых телефонах.
• SSR решает: рендеринг на сервере, браузер получает готовый HTML → меньше начальной работы.

Медленный Time to Content

SSR ускоряет время до появления контента (хотя интерактивность приходит после гидратации).

Как работает

1. Сервер выполняет приложение, генерирует HTML.
2. Браузер показывает HTML (быстрый показ).
3. Загружается JS → гидратация (оживление разметки) → интерактивность.

Компромисс

SSR добавляет нагрузку на сервер и задержку до интерактивности (гидратация), но решает главные минусы SPA (первый показ, SEO). Гибрид (Next.js) сочетает SSR + SPA-навигацию.

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

SSR решает минусы SPA: медленный первый показ (отдаёт готовый HTML сразу, до JS → быстрый FCP), слабое SEO (заполненный HTML для роботов и превью), плохую производительность на слабых устройствах (рендер на сервере, меньше работы в браузере). Работает: сервер генерит HTML → быстрый показ → гидратация оживляет. Ценой нагрузки на сервер; гибрид (Next.js) — SSR + SPA-навигация.