Cache Components и use cache

Cache Components — новая модель кеширования, появившаяся в Next.js 16. Она включается настройкой и меняет подход: все данные по умолчанию динамические, а то, что можно хранить, вы явно помечаете директивой 'use cache'. Страница при этом собирается из статической «оболочки», готовой заранее, и динамических частей, которые приходят потоком. Этот способ называют частичной предварительной отрисовкой (Partial Prerendering).

Включение

Добавьте настройку в next.config.ts и перезапустите сервер разработки:

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

Без этой настройки директива 'use cache' и функции из этого урока не работают.

Кешировать функцию данных

Директива 'use cache' в начале асинхронной функции сохраняет её результат. Сделаем так со списком статей:

// lib/posts.ts (фрагмент)
import { cacheLife, cacheTag } from 'next/cache';
 
export async function getPosts(): Promise<Post[]> {
  'use cache';
  cacheLife('hours');
  cacheTag('posts');
 
  return db.select().from(posts);
}

cacheLife('hours') задаёт срок хранения — около часа, cacheTag('posts') даёт результату метку. Аргументы функции входят в ключ кеша: getPost('a') и getPost('b') хранятся отдельно. Главная и /posts теперь показывают список из кеша.

Профили cacheLife

Сброс после добавления статьи

В серверном действии createPost после записи в базу вызовите updateTag('posts') из next/cache — кеш с этой меткой удалится, и новая статья сразу появится в списке.

Некешируемые данные — в Suspense

Данные без 'use cache' и чтение cookies() или headers() выполняются при каждом запросе. Такой компонент нужно обернуть в Suspense — как Comments в уроке о потоковой отрисовке:

// app/posts/[slug]/page.tsx (фрагмент)
<Suspense fallback={<p>Загружаем комментарии...</p>}>
  <Comments />
</Suspense>

Заглушка попадёт в статическую оболочку, а комментарии придут потоком. Если забыть Suspense, сервер разработки покажет подсказку о блокирующем маршруте.

Что меняется в проекте

• Экспорты dynamic, revalidate и fetchCache из страниц больше не нужны и вызывают ошибку — их заменяют 'use cache', cacheLife и Suspense.
• dynamicParams не поддерживается, а generateStaticParams должна вернуть хотя бы один элемент.
• В таблице сборки появляется значок ◐ — страница с заранее готовой оболочкой и потоковыми частями.

Курс строится на обычной модели, потому что новый проект создаётся без этой настройки. Включать Cache Components стоит осознанно, когда вы готовы пройти по всем страницам.

Частая ошибка

Вызвать cookies() внутри функции с 'use cache'. Кеш общий для всех посетителей, поэтому данные запроса внутри него запрещены — Next.js выдаст ошибку. Читайте куку снаружи, в некешированном компоненте, а в кешированную функцию передавайте уже значение аргументом.