next-cache-components

Partial prerendering in Next.js blends static, cached, and dynamic content in a single route by using the 'use cache' directive for reusable data and Suspense boundaries for fresh runtime fetches. This allows instant delivery of static shells while streaming dynamic data.

To enable cache components, add cacheComponents to your Next.js config and annotate components or data-fetching functions with the 'use cache' directive. This activates selective prerendering to optimize routes needing both fast initial renders and fresh data.

Yes, cache components require Next.js 16 or newer. The feature relies on the cacheComponents config option and the 'use cache' directive introduced in that version to properly manage static, cached, and dynamic content blending.

The best way to invalidate cached Next.js route content is using cacheTag and updateTag. These enable targeted, immediate, or background cache refresh for specific cached components without invalidating the entire route or rebuilding static content.

Yes, cache components are ideal for data-heavy dashboards. They combine auto-prerendered static content for instant loads with cached data via 'use cache' and dynamic Suspense boundaries to ensure dashboard metrics remain up-to-date.

Next.js cache component keys derive from function location, arguments, and outer scope to ensure correct cache isolation. If keys collide, verify that your cached functions have distinct locations, unique arguments, or properly scoped outer variables for accurate cache separation.