Кэш: 'use cache', теги и PPR

Что такое кэш

Кэш = вы сохраняете результат дорогой операции (запрос к БД, запрос к API, рендер), чтобы не повторять её на каждый запрос. Итог: мгновенные страницы и меньше нагрузки на сервер.

Цена: данные в кэше могут устареть. Поэтому любому кэшу нужна стратегия инвалидации — когда выбрасывать старую копию.

Cache Components (Next 16)

Модель Next 16, включается в next.config.ts:

const nextConfig = { cacheComponents: true, partialPrefetching: true }

Правило: по умолчанию ничего не кэшируется. Вы явно отмечаете, что кэшировать, директивой 'use cache'.

'use cache'

import { cacheLife, cacheTag } from 'next/cache'

export async function getPosts() {
  'use cache'
  cacheLife('hours')       // сколько живёт
  cacheTag('posts')        // метка для инвалидации
  return db.post.findMany()
}

• Аргументы функции автоматически входят в ключ кэша: getPost(1) и getPost(2) — разные записи.
• Ставится на функции данных, на компоненты или на всю страницу.
• Нельзя читать cookies() / headers() внутри — читайте снаружи и передавайте значение аргументом.

Профили cacheLife

Что такое Partial Prerendering

PPR сочетает статику и динамику на одной странице:

1. При сборке Next рендерит всё, что может (включая то, что в 'use cache') → статическая оболочка, мгновенно отдаётся с CDN.
2. Динамические части (в <Suspense>, читающие cookie и т. п.) рендерятся при запросе и передаются потоком.

Ровно это приложение: урок — в статической оболочке; ваш прогресс (из cookie) приходит потоком.

Вывод npm run build показывает тип каждого маршрута: ○ статика, ◐ partial prerender, ƒ динамика.

Инвалидация — виды и когда

Коротко

• По умолчанию ничего не кэшируется; 'use cache' + cacheLife + cacheTag — явно.
• PPR = мгновенная статическая оболочка + динамические части потоком.
• updateTag — для пользователя, который только что внёс изменение; revalidateTag(tag, 'max') — для остального.

Официальные источники

• Next.js — Caching
• Next.js — Revalidating
• Next.js — use cache
• Next.js — updateTag