next-cache-components

Next.js 16 cache components allow you to blend static prerendered content with cached and dynamically fetched data, delivering faster pages while keeping data fresh. You distinguish Static, Cached, and Dynamic content within routes or components.

To enable cache components in Next.js 16, you must opt into the feature by updating your Next.js configuration file. Once enabled, you can apply the use cache directive directly within your components to begin caching content.

You control cache revalidation and invalidation in Next.js by using helper APIs like cacheLife to manage lifecycles, and cacheTag with updateTag to perform selective and deterministic invalidation of your cached data.

Static content is automatically prerendered, cached content uses the use cache directive for controlled revalidation, and dynamic content leverages Suspense boundaries to fetch data on demand within the same route or component.

Yes, enabling cache components in your Next.js config is required to opt into partial prerendering features. This allows you to combine static prerendered sections with dynamically fetched data using the use cache directive and Suspense.

You should use the use cache directive when you need to cache fetched data with controlled revalidation and selective invalidation, whereas dynamic rendering without caching is necessary for content that must always reflect the latest request data without stale values.