next-cache-components

Set cacheComponents: true in next.config.ts to enable Cache Components, which replaces the old experimental.ppr flag. Routes can then mix static shells, cached components with 'use cache', and dynamic content wrapped in Suspense.

Replace the unstable_cache wrapper with an async function containing the 'use cache' directive. Move options.tags into cacheTag() calls, options.revalidate into cacheLife({ revalidate: N }), and drop the manual keyParts array since cache keys are generated automatically from arguments and closures.

Cached functions cannot access runtime request data like cookies(), headers(), or searchParams because the cached output must be request-independent. Extract the value outside the cached scope and pass it as an argument, or use 'use cache: private' when compliance requirements prevent refactoring.

updateTag invalidates the cache immediately so the same request sees fresh data, while revalidateTag triggers background revalidation with stale-while-revalidate behavior. Use updateTag after mutations where the response must reflect changes, and revalidateTag for non-urgent refreshes.

No. Cache Components require the Node.js runtime and a running server, so Edge runtime and static export are not supported. Non-deterministic values like Math.random() inside use cache also execute once at build time.