next-cache-components

The use cache directive enables partial prerendering in Next.js by marking specific components for caching. You can annotate components with use cache to activate caching and orchestrate mixed static, cached, and dynamic content.

Cache revalidation and freshness in Cache Components are controlled using cacheLife and cacheTag. These allow granular caching behavior and precise invalidation through updateTag for deterministic freshness across your application.

Next.js Cache Components have specific runtime restrictions on accessing cookies and headers. Migration guidance is provided to handle these constraints, ensuring components maintain deterministic caching behavior without breaking dynamic data boundaries.

Migrating to Cache Components involves enabling the feature in Next.js config and annotating pages with use cache directives. The skill provides migration guidance to handle mixed static, cached, and dynamic content across your application.

Next.js 16+ supports Cache Components for partial prerendering. You enable cache components in the Next.js config and start annotating components with use cache to activate caching across mixed content types.

Cache Components distinguish three content types: static content is auto-prerendered, cached content uses the use cache directive, and dynamic content leverages Suspense boundaries. This allows precise control over rendering and freshness.