CSR, SSR, SSG, ISR: как работают и когда что выбирать
↑ 7.5 SSR и Nuxt · → Следующая
Зачем это на собесе
Базовый вопрос про архитектуру: какой рендеринг выбрать под задачу и чем платим за каждый вариант.
Стратегии
| Стратегия | Где и когда HTML | Плюсы | Минусы |
|---|---|---|---|
| CSR | в браузере, после загрузки JS | простой деплой (статика), богатая интерактивность | пустая страница до JS, слабое SEO, медленный LCP |
| SSR | на сервере на каждый запрос | SEO, быстрый первый показ, актуальные данные | нужен сервер, TTFB, нагрузка на CPU |
| SSG | при сборке | максимально быстро, CDN, дёшево | данные устаревают до пересборки, долгий build |
| ISR | статика, пересобираемая по расписанию или запросу | скорость SSG + свежесть | сложнее, нужна платформа |
| Hybrid | по маршрутам разное | гибкость | сложность конфигурации |
Как выбирать
- Админка, дашборд за логином → CSR: SEO не нужно, данные персональные.
- Лендинг, документация, блог → SSG.
- Каталог, карточка товара, новости → SSR или ISR: SEO и часто меняющиеся данные.
- Персонализация + SEO → SSR с кэшем оболочки и клиентскими персональными блоками.
Ключевые понятия
- Гидрация: клиент «оживляет» серверный HTML, навешивая обработчики.
- Островная архитектура (Astro): интерактивность только в отдельных частях.
- Частичная и ленивая гидрация: не гидрировать то, что не видно.
- Streaming SSR: отправка HTML по частям.
SEO
Поисковики исполняют JS, но с задержками; для соцсетей (Open Graph) и надёжной индексации нужен HTML с сервера или пререндер.
Вопросы с ответами
Когда SSR не нужен?
Внутренние системы за авторизацией, где нет SEO, а сервер только усложнит инфраструктуру.
Чем ISR отличается от SSG?
Страницы генерируются статически, но переcоздаются по таймеру или запросу без полной пересборки сайта.