next-cache-components

To enable cache components in Next.js 16, activate the feature in your next.config.ts file. This allows you to use the use cache directive at the function or component level for selective prerendering.

The use cache directive in React enables selective prerendering and caching at the function or component level. It allows you to cache specific parts of a page, such as static shells or dynamic dashboard segments, improving perceived performance.

You control cache lifetime and invalidation by applying cacheLife and cacheTag to cached functions. cacheLife sets the duration while cacheTag enables tag-based invalidation, allowing you to revalidate content and keep personalized feeds or dashboards fresh.

Yes, cache components are designed for pages combining static shells with dynamic segments like dashboards, feeds, and user portals. They enable partial prerendering and selective data freshness to simplify complex rendering strategies in Next.js 16 apps.

Use cache components when you need granular control over partial prerendering and selective data freshness within dynamic pages. It is ideal for personalized content where combining static shells with cached data improves perceived web performance without sacrificing freshness.