Какие проблемы решает серверный рендеринг

Что проверяют

Понимаете ли вы, что SSR решает конкретные проблемы клиентского рендеринга и приносит свои. Хороший ответ сразу называет цену, а следом обычно спрашивают про гидратацию и чем SSR отличается от SSG и ISR.

Как отвечать

При чистом CSR браузер получает пустой <div id="root">, качает бандл, выполняет его, запрашивает данные и только потом рисует. SSR отдаёт готовый HTML, и это решает:

• первый показ контента: текст и картинки видны до загрузки JS, улучшаются FCP и LCP, особенно на медленной сети;
• индексация и превью: краулеры соцсетей и мессенджеров JS не выполняют, им нужны мета-теги прямо в HTML. Google рендерит JS, но отложенно и с бюджетом, другие поисковики справляются хуже;
• слабые устройства: пользователь видит страницу раньше, чем телефон разберёт бандл.

Сразу назовите цену:

• гидратация: после загрузки HTML React всё равно выполняет компоненты на клиенте и навешивает обработчики. Страница видна, но не реагирует на клики, это бьёт по INP. Расхождение серверной и клиентской разметки даёт hydration mismatch;
• TTFB и сервер: HTML собирается на каждый запрос, нужен серверный рантайм, а медленный запрос к API задерживает весь ответ;
• изоморфный код: window и localStorage на сервере недоступны.

Покажите, что знаете современные варианты. Статическая генерация (SSG) и ISR отдают готовый HTML из кэша без рендера на запрос. Потоковый SSR с Suspense шлёт оболочку сразу, а медленные части дописывает по мере готовности. React Server Components в Next.js App Router рендерят часть дерева только на сервере, и её JS вообще не попадает в бандл.

Где спотыкаются

Говорят, что SSR «снимает нагрузку с клиента». Без серверных компонентов весь JS всё равно скачивается и выполняется при гидратации.

Утверждают, что SSR упрощает кэширование. Персонализированный HTML на CDN кэшировать сложнее, чем статику, и это как раз аргумент в пользу SSG.

Выбирают SSR для закрытого личного кабинета, где SEO не нужен, а данные у каждого свои. Там обычный CSR с хорошим скелетоном часто проще и дешевле.