Cache Components в Next.js 16 — новая модель кэширования 👨‍💻 В Next.js 16 появился Cache Components — новый подход к кэшированию, построенный вокруг директивы 'use cache'. Главное изменение: кэширование теперь полностью opt-in. Никакого неявного кэширования — весь динамический код выполняется в момент запроса по умолчанию Как включить? // next.config.ts const nextConfig = { cacheComponents: true, }; export default nextConfig; Как работает? Директива 'use cache' применяется к страницам, компонентам или функциям. Компилятор автоматически генерирует ключи кэша — не нужно вручную прописывать зависимости Cache Components дополняет Partial Pre-Rendering (PPR), который появился ещё в 2023. PPR позволял рендерить части страницы статически, а части — динамически через Suspense. Теперь эта концепция получила полноценный API Есть 3 варианта где будет храниться кэш в зависимости от директивы 'use cache' — in-memory на сервере 'use cache: remote' — внешнее хранилище (Redis) 'use cache: private' — память браузера Пример 1: Кэширование функции получения данных import { cacheLife, cacheTag } from 'next/cache'; async function getProducts() { 'use cache'; cacheLife('hours'); // кэш на несколько часов cacheTag('products'); // тег для инвалидации const res = await fetch('https://api.store.com/products'); return res.json(); } Теперь getProducts() вернёт закэшированный результат. Компилятор автоматически сгенерирует ключ кэша на основе аргументов функции Пример 2: Кэширование целого компонента async function ProductCard({ id }: { id: string }) { 'use cache'; cacheLife('days'); cacheTag(product-&#036;{id}); const product = await getProduct(id); return ( <div className="card"> <h2>{product.name}</h2> <p>{product.price} ₽</p> </div> ); } Каждый ProductCard с уникальным id получит свой кэш. При изменении товара инвалидируем только его: revalidateTag('product-123', 'max') Пример 3: Partial Pre-Rendering (PPR) Cache Components отлично работает с PPR — можно комбинировать статику и динамику на одной странице: import { Suspense } from 'react'; export default async function ProductPage({ params }) { const { id } = await params; return ( <div> {/ Статическая часть — закэширована /} <ProductDetails id={id} /> {/ Динамическая часть — рендерится на лету /} <Suspense fallback={<div>Загрузка...</div>}> <PersonalizedRecommendations productId={id} /> </Suspense> </div> ); } async function ProductDetails({ id }: { id: string }) { 'use cache'; cacheLife('max'); const product = await fetchProduct(id); return <div>{product.description}</div>; } Статическая оболочка страницы отдаётся мгновенно, а персонализированные рекомендации подгружаются стримингом Документация и анонс 👇 https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents https://nextjs.org/blog/next-16#cache-components