cache-components

To enable Next.js Cache Components, set cacheComponents: true in your next.config.ts or next.config.js file. This activates Partial Prerendering, allowing you to build static page shells with streaming content for faster page loads.

The 'use cache' directive in Next.js marks specific components as cacheable. When combined with cacheComponents: true, it allows you to define data-fetching components that generate static shells and stream dynamic content.

To invalidate cached Next.js components after a data mutation, use updateTag or revalidateTag. You must first label your caches with cacheTag when defining the component, then trigger the invalidation strategy.

Suspense boundaries wrap cacheable components in Next.js to separate static shells from streaming content. This pattern enables Partial Prerendering, ensuring users see the static page immediately while dynamic data loads asynchronously.

Yes, you can set custom cache durations for Next.js Cache Components using the cacheLife directive. This allows precise control over how long specific components or data-fetching patterns remain cached before requiring revalidation.

Next.js Cache Components may fail to prerender if Suspense boundaries or generateStaticParams subshells are misconfigured. Use runtime diagnostics to identify common pitfalls and verify your cacheLife and cacheTag directives are applied correctly.