В чем разница между Server Rendering и SPA?

Server Rendering (SSR) генерирует HTML на сервере для каждого запроса, а SPA рендерит контент в браузере из JavaScript. SSR даёт быстрый первый показ и SEO, SPA — быстрые переходы после загрузки.

SPA (Single Page Application)

Сервер отдаёт пустой HTML + JS-бандл; контент рендерится в браузере:

Сервер → пустой <div id="root"> + bundle.js → JS рисует контент

• Плюсы: быстрые переходы между экранами (без перезагрузки), отзывчивость, чёткое разделение фронт/бэк.
• Минусы: медленный первый показ (грузить+выполнять JS), слабое SEO (краулеры видят пустой HTML), нагрузка на браузер.

Server Rendering (SSR)

Сервер генерирует готовый HTML на каждый запрос, браузер показывает сразу, затем гидратация:

Сервер → готовый HTML с контентом → браузер показывает → гидратация (JS оживляет)

• Плюсы: быстрый первый показ (First Contentful Paint), SEO (готовый HTML для роботов), лучше на слабых устройствах.
• Минусы: нагрузка на сервер (рендер на каждый запрос), сложнее инфраструктура, задержка до интерактивности (TTI из-за гидратации).

Различия

• Где рендерится: SSR — сервер; SPA — браузер.
• Первый показ: SSR быстрее (готовый HTML); SPA медленнее (ждёт JS).
• SEO: SSR лучше (контент в HTML); SPA хуже.
• Переходы: SPA быстрые (после загрузки); SSR может перезагружать (или SPA после гидратации).
• Нагрузка: SSR на сервер; SPA на клиент.

Гибрид

Next.js/Nuxt — SSR + SPA: первый показ на сервере, дальше SPA-навигация (лучшее из обоих).

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

SSR (Server Rendering) генерирует HTML на сервере на каждый запрос → быстрый первый показ и SEO, но нагрузка на сервер и задержка интерактивности (гидратация). SPA рендерит в браузере из JS → быстрые переходы после загрузки, но медленный первый показ и слабое SEO. Гибрид (Next.js) — SSR первый показ + SPA-навигация.