next-cache-components

Use the 'use cache' directive at the function level in Next.js 16+ to enable deterministic caching. This approach allows mixing static, cached, and dynamic content within routes like dashboards and feeds while preserving data freshness.

Cache Components is a Next.js feature replacing old experimental flags to manage three content types: Static, Cached, and Dynamic. It solves the challenge of mixing these content types to optimize route performance while preserving data freshness.

Invalidate cached data by applying cacheTag to cached functions, then using updateTag or revalidateTag for precise invalidation. This ensures content freshness across dashboards, feeds, and user pages without invalidating unrelated cache entries.

Yes, Cache Components and the 'use cache' directive require Next.js 16 or higher. You must enable the cacheComponents flag in next.config.ts to start annotating functions and managing static, cached, and dynamic content.

Yes, you can load non-blocking dynamic data with Suspense while cached content remains fast. Cache Components allows mixing dynamic and cached content within the same Next.js route, preserving performance for static elements.