CSR, SSR, SSG, ISR — разница между стратегиями рендеринга

В современных фронтенд-приложениях существует несколько стратегий рендеринга. Они определяют, когда и где будет отрисован HTML-контент: на клиенте, на сервере или заранее.

CSR — Client-Side Rendering (Рендеринг на клиенте)

HTML загружается пустым, весь контент и логика загружаются через JavaScript на стороне клиента.

Как работает CSR

• Сервер отдаёт пустой HTML-файл
• JS-приложение инициализируется в браузере
• Данные подгружаются через API

Плюсы CSR

• Быстрый отклик после загрузки
• Нет нагрузки на сервер
• Полный контроль на клиенте

Минусы CSR

• Плохая SEO (если не используется SSR/пререндеринг)
• Медленный Time-to-Content
• Требуется JS для отображения

SSR — Server-Side Rendering (Рендеринг на сервере)

HTML отрисовывается на сервере при каждом запросе. Пользователь получает уже сгенерированную страницу.

Как работает SSR

• Клиент делает запрос → сервер генерирует HTML
• После загрузки страница гидратируется React-приложением

Плюсы SSR

• Отличная SEO
• Быстрый First Contentful Paint
• Подходит для динамического контента

Минусы SSR

• Нагрузка на сервер
• Более сложная архитектура
• Задержка при первом запросе

SSG — Static Site Generation (Статическая генерация)

HTML-страницы генерируются на этапе билда и размещаются как статические файлы.

Как работает SSG

• При сборке проекта (npm run build) генерируются HTML-файлы
• Сервер просто отдаёт уже готовые страницы

Плюсы SSG

• Молниеносная скорость
• Отличная SEO
• Почти нулевая нагрузка на сервер

Минусы SSG

• Контент не обновляется без нового билда
• Не подходит для часто обновляемых страниц

ISR — Incremental Static Regeneration (Инкрементальная генерация)

Комбинация SSG + SSR: страницы генерируются на лету, но кэшируются. Используется в Next.js.

Как работает ISR

• Сначала отдаётся закэшированная версия страницы
• Если страница устарела — перегенерируется в фоне

export async function getStaticProps() {
  return {
    props: {},
    revalidate: 60, // страница пересобирается раз в 60 сек
  };
}

Плюсы ISR

• Скорость SSG + актуальность SSR
• Гибкость обновления контента
• Отлично подходит для блогов, маркетплейсов

Минусы ISR

• Нужно уметь правильно настроить кэш и revalidate

Сравнительная таблица