using-cache-directive

Use the 'use cache' directive at the file, component, or function level in Next.js 16 to explicitly enable output caching. This replaces opaque caching decisions with predictable, opt-in behavior, letting you cache dynamic data-heavy pages while maintaining control over cache duration and invalidation.

Apply 'use cache' to high-traffic, data-heavy, or dynamic pages where caching improves performance without sacrificing freshness. The Skill covers file-level, component-level, and function-level caching decisions, with guidance on when to cache shared data versus user-specific or real-time content.

Configure cacheLife to define cache duration and cacheTag to enable targeted revalidation of specific cached outputs. This explicit invalidation model replaces ambiguous caching semantics, giving you precise control over when cached data expires and refreshes.

Yes. The Skill provides migration guidance explaining how Next.js 16 shifts caching semantics from previous versions and how to refactor existing patterns. You can adopt 'use cache' incrementally across files, components, and functions while maintaining backward compatibility.

File-level 'use cache' applies to an entire Server Component file, component-level targets a specific component, and function-level caches individual async functions. Each scope offers different granularity for controlling what data gets cached and when revalidation occurs.

The Skill clarifies cache scope across routes: shared data benefits from caching, user-specific data typically should not be cached, and real-time data requires short cache lifecycles or explicit invalidation tags. This prevents stale or cross-user content from being served.