next-cache-components

Enable partial prerendering in Next.js by setting cacheComponents: true in next.config.ts and annotating components with the 'use cache' directive. This categorizes content as static, cached, or dynamic to balance pre-rendered shells with data-driven sections.

The 'use cache' directive controls caching in Next.js, while cacheLife manages revalidation times and cacheTag handles on-demand invalidation. Use them together with updateTag to selectively prerender routes and ensure data freshness without overloading the server.

Migrate from older Next.js flags by enabling cacheComponents: true in your next.config.ts file. This approach ensures safe runtime constraints while allowing you to apply 'use cache', cacheLife, and cacheTag for selective prerendering and on-demand updates.

Yes, you can mix prerendered shells with data-driven sections in a single Next.js route. By categorizing content as static, cached, or dynamic and applying cache components, you improve perceived performance and reduce server load automatically.

Cache components are needed to solve the challenge of balancing static and dynamic content. They enable on-demand updates using updateTag and cacheTag, allowing you to control revalidation, invalidation, and cache scopes while retaining data freshness.