CSR, SSR, SSG и ISR: стратегии рендеринга простыми словами
Основы3 минРедакция Innovialabs
Коротко
Разница в том, где и когда собирается HTML: в браузере (CSR), на сервере при каждом запросе (SSR), один раз при сборке (SSG) или при сборке с периодическим обновлением (ISR). Для контента подходят SSG и ISR, для персональных страниц — SSR, для закрытых панелей — CSR.
Главное за минуту
Любая страница в итоге превращается в HTML. Стратегии рендеринга отвечают на два вопроса: где этот HTML собирается и когда.
- CSR (Client-Side Rendering) — в браузере, после загрузки JavaScript.
- SSR (Server-Side Rendering) — на сервере, при каждом запросе.
- SSG (Static Site Generation) — на сервере, один раз при сборке проекта.
- ISR (Incremental Static Regeneration) — как SSG, но страницы пересобираются по таймеру или по событию без полной пересборки сайта.
Современные фреймворки вроде Next.js и Nuxt позволяют смешивать стратегии на одном сайте: каждая страница получает свою.
Как это выглядит
CSR: Браузер -> пустой HTML + JS -> JS запрашивает API -> страница видна
SSR: Браузер -> сервер собирает HTML с данными -> готовая страница
SSG: Сборка -> готовые HTML-файлы на CDN -> браузер получает их сразу
ISR: Как SSG, но через N секунд или после события страница
тихо пересобирается в фоне
Каждая стратегия подробнее
CSR. Сервер отдаёт почти пустую страницу и JavaScript-бандл, а всё остальное делает браузер. Плюсы: простой хостинг, плавные переходы внутри приложения. Минусы: первый показ медленнее, особенно на слабых телефонах, а поисковикам сложнее увидеть контент.
SSR. Сервер на каждый запрос получает данные и отдаёт готовый HTML. Плюсы: контент сразу виден, данные всегда свежие, хорошо для SEO. Минусы: нужен работающий сервер, нагрузка растёт вместе с трафиком, медленный API тормозит всю страницу.
SSG. Все страницы собираются заранее и лежат как файлы. Плюсы: максимальная скорость, минимальная стоимость, высокая надёжность. Минусы: чтобы обновить контент, нужна пересборка; при тысячах страниц сборка становится долгой.
ISR. Компромисс: страница отдаётся как статика, но периодически или по сигналу обновляется. Плюсы: скорость статики и достаточно свежие данные. Минусы: какое-то время пользователи могут видеть старую версию; нужна платформа, которая поддерживает этот режим.
Сравнение
| CSR | SSR | SSG | ISR | |
|---|---|---|---|---|
| Скорость первого показа | Ниже | Хорошая | Лучшая | Лучшая |
| SEO | Слабее | Отлично | Отлично | Отлично |
| Нагрузка на сервер | Минимальная | Высокая | Минимальная | Низкая |
| Свежесть данных | Всегда свежие | Всегда свежие | До пересборки | С задержкой |
| Персонализация | Да | Да | Нет | Нет |
Что выбрать для вашего проекта
- Блог, документация, лендинг — SSG. Если контент правится через CMS — ISR, чтобы не пересобирать весь сайт.
- Интернет-магазин — каталог и карточки товаров через ISR (быстро и индексируется), корзина и оформление заказа — SSR или CSR, потому что они персональные.
- Новостной сайт — ISR с коротким интервалом или ревалидацией при публикации.
- Личный кабинет, дашборд, админка — CSR или SSR. SEO здесь не нужно, страницы закрыты логином, а данные у каждого свои.
- Страница с поиском и фильтрами — SSR, если результаты должны индексироваться, иначе CSR.
Частые ошибки
- Делать публичный сайт полностью на CSR. Контент появляется поздно, а продвижение в поиске усложняется.
- SSR для всего подряд. Неизменные страницы рендерятся заново на каждый запрос — это лишние расходы на сервер.
- Персональные данные в статике. Кэшированная страница может показать одному пользователю данные другого.
- Выбор «одной стратегии на весь сайт». Сильная сторона современных фреймворков — смешивание.