Что такое SSR и SPA
Что проверяют
Понимаете ли вы, что это ответы на разные вопросы. SPA описывает, как приложение живёт в браузере, SSR описывает, где собирается HTML первого ответа, и их совмещают. Следом спрашивают про гидратацию и про то, что будет, если серверная и клиентская разметка разойдутся.
Как отвечать
- SPA: браузер получает почти пустой HTML и бандл, дальше страницы рисует JavaScript, переходы идут через клиентский роутинг на History API без перезагрузки документа. Раздаётся как статика с CDN, дёшево, после загрузки переходы быстрые. Минусы: пустой экран до выполнения бандла, тяжёлый JS бьёт по LCP на слабых телефонах;
- CSR: так называют сам способ рендеринга в SPA, чтобы отличать его от серверного;
- SSR: сервер на каждый запрос выполняет компоненты и отдаёт готовый HTML. Контент виден раньше, его получают краулеры и превью ссылок в мессенджерах, которые JavaScript не выполняют. Затем идёт гидратация: React или Vue навешивает обработчики на готовую разметку, и страница становится интерактивной;
- SSG и ISR: HTML собирается заранее при сборке или обновляется по таймеру. Для каталогов и блогов это обычно выгоднее рендера на каждый запрос.
Next.js, Nuxt и React Router в режиме фреймворка отдают первый ответ с сервера, а дальше приложение ведёт себя как SPA. В Next.js App Router к этому добавились React Server Components и потоковая отдача: часть компонентов вообще не попадает в клиентский бандл.
Выбор привязывайте к метрикам: публичные страницы, SEO и LCP говорят за SSR или SSG, закрытый личный кабинет за SPA.
Где спотыкаются
Противопоставляют SSR и SPA и не знают про гидратацию. Тогда непонятно, почему страница уже видна, а кнопки ещё не нажимаются.
Утверждают, что SPA не индексируется совсем. Googlebot выполняет JavaScript, но с задержкой и не всегда полностью, а соцсети и многие боты не выполняют его вообще, поэтому проблема реальна, хоть и не абсолютна.
Считают SSR бесплатным ускорением. Медленный запрос к базе увеличивает TTFB, а обращение к window или Date.now() во время рендера даёт расхождение разметки и ошибку гидратации.