next-cache-components

To use 'use cache' for Partial Prerendering in Next.js, annotate components or functions with the directive to mix static and dynamic content. This enables fine-grained caching and reduces server workload by automatically handling cached versus dynamic data behavior.

The best way to mix static and dynamic content in a single Next.js route is using Cache Components. This feature enables Partial Prerendering by applying the 'use cache' directive, allowing you to blend cached data with live dynamic content seamlessly.

cacheLife and cacheTag control data revalidation in Next.js Cache Components by defining cache duration and invalidation rules. Applying these directives across page, component, and function scopes lets you manage data freshness and trigger targeted updates using updateTag.

Cache Components in Next.js 16+ support safe usage patterns that respect constraints around cookies and headers. You must ensure deterministic execution and follow cache key generation rules to avoid caching non-deterministic runtime data.

You should not use the 'use cache' directive in Next.js when dealing with non-deterministic runtime data or when direct access to live cookies and headers is required. Caching such dynamic data violates frontmatter validation rules and breaks safe usage patterns.

Next.js 16+ supports Partial Prerendering for dashboards with live data through Cache Components. By annotating specific sections with 'use cache', you can isolate frequently updated sections while keeping the rest of the dashboard statically prerendered.