next-cache-components

Cache components enable partial prerendering in Next.js by blending static and dynamic content. You enable the feature by setting cacheComponents: true in your Next.js config and annotate data-fetching components with the 'use cache' directive.

The 'use cache' directive is a Next.js 16 feature that enables partial prerendering by caching specific data-fetching components. It allows fine-grained caching control using cacheLife and cacheTag for robust invalidation across routes.

Use cache components when you have pages with a fast static shell but need to render frequently changing runtime data. This approach blends static, cached, and dynamic content to speed up rendering without sacrificing data freshness.

You invalidate cached data in Next.js cache components using the cacheTag and updateTag directives. These provide robust, fine-grained cache invalidation alongside cacheLife controls for managing how long blended prerendered content persists.

Yes, the cacheComponents feature and the 'use cache' directive require a Next.js 16+ project. It relies on the framework's automatic key generation and partial prerendering capabilities introduced in that version.