> Какие стратегии рендеринга бывают в Next.js и их плюсы и минусы (JavaScript, Next.js)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Kodix

Стек: JavaScript, Next.js

> Пример ответа

В Next.js доступны четыре основные стратегии рендеринга:

SSR (Server-Side Rendering) - страница генерируется на сервере при каждом запросе.
Плюсы: SEO-оптимизация, актуальные данные, быстрый первый контент (FCP).
Минусы: высокая нагрузка на сервер, медленный TTFB (Time to First Byte), сложность кэширования.
SSG (Static Site Generation) - HTML генерируется на этапе сборки.
Плюсы: максимальная скорость загрузки, низкая нагрузка на сервер, отличное кэширование через CDN.
Минусы: данные устаревают до следующей сборки, не подходит для динамического контента.
ISR (Incremental Static Regeneration) - гибрид SSG с возможностью перестроения страниц по таймеру или запросу.
Плюсы: сочетает скорость статики с актуальностью данных, частичное обновление без полной пересборки.
Минусы: сложность настройки, возможны задержки при первом запросе после инвалидации.
CSR (Client-Side Rendering) - рендеринг полностью на клиенте (например, с useEffect или SWR).
Плюсы: минимальная нагрузка на сервер, подходит для интерактивных дашбордов.
Минусы: плохая SEO (контент не виден ботам), медленный LCP (Largest Contentful Paint).

Выбор стратегии зависит от требований к SEO, свежести данных и бюджета на серверные ресурсы. Часто комбинируют: статические страницы (SSG), а для динамических разделов - SSR или ISR.