Что такое серверный рендеринг (SSR) и статическая генерация (SSG)
Что проверяют
Понимаете ли вы, в какой момент и где рождается HTML и чем за это приходится платить. Следом обычно спрашивают про гидратацию и про ISR: как обновить статическую страницу, не пересобирая весь сайт.
Как отвечать
Разведите подходы по моменту рендера:
- SSR: HTML собирается на сервере на каждый запрос. Данные свежие, можно учитывать куки и пользователя, но каждый заход стоит серверного времени, а TTFB зависит от самого медленного запроса к API;
- SSG: HTML собирается один раз при сборке и раздаётся с CDN как файл. Самый быстрый ответ и почти нулевая нагрузка на сервер, но контент устаревает до следующей сборки;
- ISR: гибрид из Next.js. Страница статическая, но перегенерируется в фоне по таймеру (
revalidate) или по событию (revalidatePath,revalidateTag); - CSR: для контраста. Сервер отдаёт пустую оболочку, контент рисует JavaScript, и поисковик с медленным телефоном ждут.
Обязательно скажите, что SSR и SSG заканчиваются гидратацией: браузер всё равно качает JavaScript и навешивает обработчики. Быстрый первый показ не равен быстрому отклику на клик. В App Router часть цены снимают серверные компоненты, их код в бандл не попадает, а стриминг через Suspense отдаёт каркас страницы раньше медленных данных.
В Next.js App Router страница без особых настроек пререндерится статически и становится динамической, когда читает cookies(), headers() или searchParams. Список путей для пререндера динамического сегмента задаёт generateStaticParams. В Nuxt и Astro идеи те же, названия другие.
Выбор: каталог, блог, документация идут в SSG или ISR, личный кабинет и персональная выдача в SSR.
Где спотыкаются
Говорят «SSR медленнее SSG» без уточнения. Медленнее ответ сервера, а по сравнению с CSR SSR как раз показывает контент раньше.
Путают SSG с SPA и считают, что статическая страница не покажет свежие данные. Покажет: статический каркас плюс клиентский запрос за динамической частью.
Не знают про ошибки гидратации. Date.now(), Math.random() или обращение к window при рендере дают разный HTML на сервере и клиенте, и React сообщает о несовпадении.