SSR, SSG, ISR, CSR, PPR
Где и когда рендерится страница, что выбрать в каком контексте и как Next 16 выводит стратегию.
Обновлено
Что значит «стратегия рендеринга»
Рендеринг = превращение ваших компонентов в HTML. Вопрос в том, где и когда это происходит:
- где — на сервере или в браузере;
- когда — один раз при сборке; при каждом запросе; или один раз и затем периодически обновляется.
Каждая комбинация — стратегия со своей аббревиатурой. Выбор определяет, как быстро появится страница, насколько свежи данные, сколько стоит сервер и насколько хорошо её видит Google.
Стратегии коротко
| Стратегия | Где | Когда | Результат |
|---|---|---|---|
| CSR — client-side rendering | браузер | после загрузки JS | почти пустой HTML; страницу строит JS |
| SSR — server-side rendering | сервер | на каждый запрос | полный HTML со свежими данными |
| SSG — static site generation | сервер | один раз при сборке | готовые HTML-файлы, раздаются с CDN |
| ISR — incremental static regeneration | сервер | при сборке или первом визите, затем обновляется периодически / по запросу | статика + достаточно свежие данные |
| PPR — partial prerendering | оба | статическая оболочка при сборке + динамические части при запросе, потоком | статика и динамика на одной странице |
Как ощущается каждая
CSR — пользователь видит содержимое только в самом конце:
пустой HTML→скачать JS→запросить данные→страница появляетсяSSR — содержимое приходит готовым с сервера, но сервер работает на каждом запросе:
сервер получает данные→полный HTML→страница появляется→гидратацияSSG / ISR — всё готово заранее, на CDN:
готовый HTML на CDN→страница появляется мгновенно→гидратацияГидратация = React навешивает события на HTML, полученный с сервера, чтобы он стал интерактивным.
Сравнение
| CSR | SSR | SSG | ISR | PPR | |
|---|---|---|---|---|---|
| Первый показ | медленно | средне | мгновенно | мгновенно | мгновенно (оболочка) |
| Свежие данные | да | да | только на момент сборки | почти | да, в динамических частях |
| Персонализация | да | да | нет | нет | да, в динамических частях |
| SEO | слабо | хорошо | отлично | отлично | отлично |
| Стоимость сервера | мала | велика | минимальна | мала | мала |
Когда что использовать
| Контекст | Стратегия | Почему |
|---|---|---|
| блог, документация, лендинг, маркетинговые страницы | SSG | контент меняется редко; максимальная скорость, SEO |
| каталог товаров, новостные статьи | ISR | много страниц, иногда меняются (цена, наличие) |
| статическая страница с персональной частью (корзина, «привет, Ana») | PPR | мгновенная оболочка + персонализация |
| дашборд, почта, аккаунт — приватные, всегда свежие данные | SSR (динамика) | зависит от пользователя на каждом запросе |
| редактор, приложение вроде Figma / Excel, игра | CSR для интерактивной зоны | всё — локальное взаимодействие; SEO не важно |
| поиск с фильтрами | SSR для первой страницы + клиент для фильтров | SEO + интерактивность |
Большинство реальных приложений сочетают стратегии: статичный маркетинг, товары на ISR, динамический аккаунт, клиентский редактор.
Как это выглядит в Next.js 16 (App Router)
В App Router не нужно выбирать аббревиатуру для страницы — Next выводит стратегию из того, что использует код:
| Что вы делаете в коде | Результат |
|---|---|
ничего динамического (или данные в 'use cache') |
статика (SSG) — ○ при сборке |
'use cache' + cacheLife('hours') |
ISR — статика, перегенерируется через выбранное время |
generateStaticParams + динамические маршруты |
SSG для перечисленных значений, ISR для остальных при первом визите |
cookies(), headers(), searchParams внутри <Suspense> |
PPR — ◐ при сборке |
| те же API на всю страницу без кэша | динамический SSR — ƒ |
| Client Component с запросом после монтирования / TanStack Query | CSR для этой зоны |
Это приложение: уроки — в статической оболочке (генерируются при сборке, кэш hours), ваш прогресс приходит динамически потоком — PPR. Редактор кода — CSR (next/dynamic с ssr: false).
Automatic Static Optimization
Термин из Pages Router (старый роутер, папка pages/): если страница не экспортирует getServerSideProps или getInitialProps, Next автоматически генерирует её как статический HTML. То есть статика по умолчанию, динамика — только когда явно попросите.
App Router развил эту идею: вывод делается на уровне компонента, а не страницы — отсюда PPR. В проектах с pages/ вы встретите:
| Pages Router | Стратегия |
|---|---|
| без функций данных | автоматический SSG (Automatic Static Optimization) |
getStaticProps |
SSG |
getStaticProps + revalidate: 60 |
ISR |
getServerSideProps |
SSR |
useEffect + fetch |
CSR |
Коротко
- CSR = в браузере; SSR = на сервере на каждый запрос; SSG = при сборке; ISR = обновляемая статика; PPR = статика + динамика на одной странице.
- Публичный редко меняющийся контент → статика / ISR; персональные данные → динамика / PPR; чистое взаимодействие → клиент.
- В Next 16 стратегия выводится из кода:
'use cache', runtime-API и<Suspense>.