SSR-кэширование в NextJS: ускоряем рендеринг в 10 раз

Кэширование в Next.js — тема, где чаще всего теряют время не из-за сложности механизмов, а из-за непонимания, сколько их. Слоёв несколько: кэш запросов данных, кэш отрендеренных маршрутов, кэш клиентского роутера. Симптом «изменил данные, страница прежняя» может относиться к любому из них, и ищут обычно не в том.

Почему кэширование критично для SSR

Server-Side Rendering — это мощно, но дорого. Каждый запрос выполняет рендеринг на сервере: запросы к БД, API, сборка HTML. Без кэширования время ответа растёт линейно с нагрузкой.

NextJS 14+ предлагает несколько уровней кэширования:

• Request Memoization — дедупликация запросов в рамках одного рендера
• Data Cache — кэш fetch-запросов между рендерами
• Full Route Cache — кэш всего HTML-ответа
• Router Cache — клиентский кэш для навигации

Базовый fetch с кэшированием

В NextJS fetch автоматически кэшируется. Настройки через опции:

// Кэш навсегда (по умолчанию в Server Components)
const data = await fetch('https://api.example.com/data');
// Кэш на 1 час
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }
});
// Без кэша
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store'
});

ISR — Incremental Static Regeneration

ISR позволяет обновлять статические страницы без полной пересборки:

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Ревалидация каждый час
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}
export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Страница генерируется при первом запросе и кэшируется. Через час следующий запрос триггерит фоновую регенерацию.

On-Demand Revalidation

Когда данные меняются, можно инвалидировать кэш вручную:

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
export async function POST(request: Request) {
  const { secret, path, tag } = await request.json();
  // Проверка секрета
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  // Инвалидация по пути
  if (path) {
    revalidatePath(path);
  }
  // Инвалидация по тегу
  if (tag) {
    revalidateTag(tag);
  }
  return Response.json({ revalidated: true, now: Date.now() });
}

Тегирование запросов

Теги позволяют группировать связанные запросы для инвалидации:

// Помечаем запрос тегом
const posts = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
});
// Помечаем несколькими тегами
const post = await fetch(`https://api.example.com/posts/${id}`, {
  next: { tags: ['posts', `post-${id}`] }
});
// Инвалидируем все посты
revalidateTag('posts');
// Инвалидируем один пост
revalidateTag('post-123');

Кэширование на Edge

Для максимальной скорости используйте Edge Runtime:

// app/api/data/route.ts
export const runtime = 'edge';
export async function GET() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 }
  });
  return Response.json(await data.json(), {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300'
    }
  });
}

Edge-функции работают ближе к пользователю (CDN), что даёт:

• Меньшую задержку (latency)
• Быстрый cold start
• Глобальное распределение

Мониторинг кэша

Добавьте логирование для отладки:

// lib/cache-logger.ts
export function logCacheStatus(key: string, hit: boolean) {
  if (process.env.NODE_ENV === 'development') {
    console.log(`[Cache] ${key}: ${hit ? 'HIT' : 'MISS'}`);
  }
}

Как определить, какой слой отдаёт старое

Порядок проверки, который экономит больше всего времени. Он идёт снаружи внутрь — от самого дешёвого шага к самому дорогому.

1. Откройте страницу в приватном окне или обновите принудительно. Если данные стали свежими, виноват Router Cache — клиентский кэш навигации, живущий в памяти вкладки. Он сбрасывается перезагрузкой и с сервером никак не связан.
2. Запросите страницу через curl без заголовков браузера. Свежий HTML при устаревшем в браузере — снова клиентский слой; устаревший HTML означает проблему на сервере, идём дальше.
3. Проверьте, что сам источник отдаёт новые данные. Дёрните API напрямую по тому же адресу, который использует fetch. Удивительно часто выясняется, что кэш Next.js ни при чём, а устарел ответ бэкенда или CDN перед ним.
4. Посмотрите на маршрут в выводе next build. Значок ○ означает статику, ● — SSG с параметрами, ƒ — динамический рендер. Страница, которую вы считали динамической, вполне может оказаться статической и лежать в Full Route Cache до следующей сборки.
5. И только после этого трогайте revalidate.

Разница в стоимости шагов существенная: первые два занимают минуту, последний — полный цикл сборки и выкладки.

Итоги

1. По умолчанию — fetch кэшируется навсегда
2. revalidate — устанавливайте TTL для динамических данных
3. Теги — группируйте запросы для точечной инвалидации
4. On-demand — вызывайте из webhooks при изменении данных
5. Edge — используйте для глобальной CDN-раздачи

Правильное кэширование — это баланс между свежестью данных и производительностью.

Совет «начните с агрессивного кэширования и ослабляйте» стоит уточнить: он верен для контента и неверен для персональных данных. Ошибка в сторону излишнего кэширования на публичной странице означает устаревшую информацию — неприятно, но исправимо. Та же ошибка на странице с данными пользователя означает, что один посетитель увидит данные другого, и это уже инцидент.

Отсюда рабочее правило: начинайте с агрессивного кэширования публичного контента и с полного отказа от кэша для всего, что зависит от пользователя. Ослаблять первое и усиливать второе — по мере того, как разберётесь.

И последнее, что экономит больше всего времени при отладке: определите, какой именно слой отдаёт вам старые данные, прежде чем что-то менять. Кэш данных, кэш маршрута и кэш клиентского роутера дают одинаковый симптом, но лечатся по-разному, а перебор наугад в этой теме особенно затратен.