Next.js рендеринг и кеширование: SSR, SSG, ISR и Server Components

Эта статья продолжает цикл «Next.js: с нуля до высоконагруженного веб-сервиса». После базовой архитектуры проекта наступает главный инженерный выбор: как именно страница должна рендериться и кешироваться. В Next.js производительность начинается не с микробенчмарков, а с правильной стратегии доставки HTML, данных и JavaScript.

Короткий ответ

Для статичных страниц выбирайте SSG или ISR. Для страниц с персональными данными используйте динамический рендеринг и аккуратный server-side data fetching. Для списков, каталогов и статей чаще всего подходит гибрид: HTML кешируется, данные обновляются через revalidate, а интерактивность остаётся в небольших Client Components.

Что рендерит Next.js

Next.js в App Router рендерит React Server Components на сервере и отправляет клиенту результат в виде HTML и RSC payload. Это снижает размер JavaScript-бандла, потому что компоненты без интерактива не обязаны попадать в браузер. Client Components подключаются только там, где нужны state, события, эффекты или доступ к DOM.

SSR: когда HTML нужен на каждый запрос

SSR подходит для страниц, которые зависят от пользователя, cookies, текущего состояния сессии или часто меняющихся данных. Примеры: личный кабинет, корзина, внутренние панели, страницы с правами доступа. Главный плюс SSR — актуальность. Главный минус — каждый запрос создаёт нагрузку на сервер и upstream API.

export default async function AccountPage() {
  const user = await getCurrentUser();
  const orders = await getOrders(user.id);

  return <OrdersView orders={orders} />;
}

SSG: когда страница почти не меняется

Static Site Generation выгоден для контента, который можно собрать заранее: документация, статьи, лендинги, страницы технологий, справочники. Пользователь получает готовый HTML из CDN, а сервер приложения почти не участвует в обработке запроса. Это самый дешёвый и быстрый способ доставки публичного контента.

ISR: статический HTML с управляемым обновлением

Incremental Static Regeneration решает проблему устаревания. Страница отдаётся как статическая, но Next.js может пересобрать её после истечения интервала revalidate или по событию. Для блогов, маркетинговых страниц, каталогов и витрин это часто лучший баланс между скоростью, SEO и актуальностью.

export const revalidate = 300;

export default async function ArticlePage({ params }: Props) {
  const article = await getArticle(params.slug);
  return <Article article={article} />;
}

Кеширование fetch в App Router

В App Router поведение кеша часто задаётся на уровне fetch. Если данные можно переиспользовать между запросами, используйте next: { revalidate }. Если данные всегда должны быть свежими, используйте cache: 'no-store'. Важно не смешивать персональные данные с публичным кешем: одна ошибка здесь может привести к утечке приватного контента.

await fetch('https://cms.example.com/api/articles', {
  next: { revalidate: 600 },
});

await fetch('https://api.example.com/me', {
  cache: 'no-store',
});

Как выбрать стратегию

• Статья, новость, документация: SSG или ISR.
• Каталог с умеренной частотой обновления: ISR плюс on-demand revalidation.
• Личный кабинет: динамический рендеринг и no-store для приватных запросов.
• Публичная страница с небольшим интерактивом: Server Component как основа, Client Component только для виджетов.

Почему это важно для SEO и AI-поиска

Поисковым системам и retrieval-системам проще обрабатывать страницы, где основной смысл доступен в HTML, структура заголовков отражает тему, а блоки отвечают на конкретные вопросы. MUVERA как исследовательский алгоритм Google показывает общий тренд: поиск всё сильнее опирается на семантическое представление текста. Поэтому страница должна не просто содержать ключевые слова, а ясно раскрывать сущности: SSR, SSG, ISR, Server Components, кеширование, revalidate, CDN.

FAQ

Что быстрее: SSR или SSG?

SSG обычно быстрее для пользователя, потому что HTML уже готов и может отдаваться из CDN. SSR нужен, когда данные нельзя подготовить заранее.

Можно ли использовать ISR для статей?

Да. Для CMS-контента ISR часто оптимален: статья быстро открывается, а обновления подтягиваются через revalidate или webhook.

Итог

В высоконагруженном Next.js-приложении рендеринг и кеширование — это архитектура, а не настройка в конце проекта. Сначала определите свежесть данных, приватность и стоимость запроса, затем выбирайте SSR, SSG, ISR или гибридную модель.