next-cache-components

You enable partial prerendering by setting cacheComponents to true in next.config.ts and adding the 'use cache' directive to data-fetching functions. This mixes static, cached, and dynamic content in a single route.

The 'use cache' directive is an annotation for data-fetching functions in Next.js 16+ that enables caching. It works with cacheLife and cacheTag APIs to fine-tune caching and invalidation across components.

You fine-tune cache invalidation using the cacheTag and cacheLife APIs alongside the 'use cache' directive. cacheTag tags cached data for targeted invalidation, while cacheLife controls the caching duration.

Yes, cache components require Next.js 16 or higher. You must enable cacheComponents in next.config.ts and use the 'use cache' directive to leverage partial prerendering for optimizing initial payloads.

Partial prerendering improves performance by mixing a static shell with cached data while deferring dynamic content. This reduces unnecessary recomputation and optimizes initial payloads while balancing performance with data freshness.

Using 'use cache' requires enabling cacheComponents in your Next.js config and applies to Next.js 16+. You must manage cache invalidation carefully using cacheTag and cacheLife to ensure dynamic content remains fresh.