next-cache-components

Caching specific components in Next.js is done using the 'use cache' directive at the page, component, or function level. This allows you to mix static, cached, and dynamic content within a single route by wrapping dynamic sections in Suspense boundaries.

Partial prerendering in Next.js 16 is set up by enabling cacheComponents: true in next.config.ts. This automatically prerenders static content while integrating cached and dynamic content models.

Next.js supports fine-grained cache invalidation through cacheLife, cacheTag, and updateTag patterns. These directives control caching behavior and allow targeted updates without invalidating the entire route.

You can cache user dashboard data while keeping the shell static by applying the 'use cache' directive to the data components. The surrounding static shell is auto-prerendered for fast loads.

You need to enable cacheComponents: true in next.config.ts to use the 'use cache' directive. This configuration enforces support for partial prerendering and mixed static and dynamic content models.