next-cache-components

To blend static and dynamic content in a single Next.js route, enable Cache Components to use Partial Prerendering, serving static, cached, and dynamic content simultaneously. This approach optimizes web performance by mixing instantly served static shells with Suspense-wrapped dynamic data.

The 'use cache' directive in Next.js 16+ is an annotation that marks specific functions or components for caching. It enables Partial Prerendering by allowing developers to define cache lifetimes and invalidation strategies directly within the code block.

You control cache invalidation in Next.js server components using the cacheTag and updateTag APIs. By assigning cacheTag to cached data, you can selectively invalidate and update specific cached entries without clearing the entire route cache.

Yes, Next.js Partial Prerendering supports fine-grained cache lifetimes through the cacheLife API. This allows you to specify exact revalidation durations for cached content, ensuring dynamic data fetches balance freshness with web performance.

To enable Cache Components in a Next.js project, you must enable the cacheComponents flag in your next.config.ts file. Once enabled, you can annotate functions with the 'use cache' directive to start caching data and optimizing route rendering.

Use Partial Prerendering instead of fully dynamic rendering when your route mixes static content with dynamic data that can be cached. It solves performance struggles by serving an instant static shell while fetching dynamic content in the background via Suspense.