next-cache-components

Next.js Cache Components let you mix static, cached, and dynamic content to optimize rendering performance without sacrificing real-time data. You annotate components with the use cache directive to control caching behavior.

To use the use cache directive, enable cacheComponents in your next.config.ts file and annotate pages or components with use cache. You then manage caching behavior and invalidation using cacheLife and cacheTag.

Yes, Cache Components require Next.js 16 or later. You must enable the cacheComponents flag in your next.config.ts file to opt into smart caching and begin annotating components with use cache.

The best way to revalidate cached data in Next.js server rendering is using cacheLife and cacheTag management tools. You can use updateTag to control caching invalidation and schedule periodic revalidation for data-cached components.

You need cacheLife and cacheTag to manage proper invalidation when using Cache Components. They allow you to control how long cached components stay fresh and selectively revalidate cached data fetching components when underlying data changes.

You should not use the use cache directive for Next.js content that requires up-to-date data on every request. It is designed for static shells and data-cached components, so applying it to highly dynamic content defeats its purpose.