Cache Components (Next.js 16+)

Mix static, cached, and dynamic content in a single Next.js route with Partial Prerendering.

- Enable with cacheComponents: true in next.config.ts; replaces the old experimental.ppr flag

- Use the 'use cache' directive at file, component, or function level to cache async data with automatic key generation based on arguments and closures

- Control cache lifetime with cacheLife() using built-in profiles ('minutes', 'hours', 'days', 'weeks', 'max') or inline configuration with stale, revalidate, and expire times

- Invalidate caches with cacheTag() for tagging and updateTag() for immediate refresh or revalidateTag() for background revalidation

- Wrap dynamic content in Suspense; cannot access cookies(), headers(), or searchParams inside use cache blocks unless using 'use cache: private'

Cache Components (Next.js 16+)

Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route.

Enable Cache Components

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

This replaces the old experimental.ppr flag.