next-cache-components

Next.js cache components let you selectively prerender and cache content to improve page performance. You enable the feature in next.config.ts and use the use cache directive to categorize content into static, cached, or dynamic rendering states.

You manage cache lifecycle and invalidation using cacheLife, cacheTag, and updateTag within your use cache directives. This allows you to control how long content persists and selectively invalidate cached routes or server components when underlying data changes.

The use cache directive categorizes content into Static, Cached, and Dynamic states. Static content is prerendered at build, Cached content is stored and served across requests with invalidation, and Dynamic content renders live on every request.

Yes, the use cache directive works in both routes and server components to manage partial prerendering. You can selectively apply caching across your application's static, cached, and dynamic content wherever rendering control is needed.

Yes, enabling cacheComponents in next.config.ts is required to opt into the feature. This configuration step is necessary before you can annotate server components with the use cache directive to manage rendering behavior.