next-cache-components

Cache components enable Partial Prerendering (PPR) in Next.js 16 by allowing a single route to serve static shells, cached data, and dynamic content, reducing render times. You enable it by turning on cacheComponents in next.config.

The use cache directive applies deterministic caching within Next.js route components, allowing you to combine static rendering, cached fetches, and dynamic updates on a single page using cacheLife, cacheTag, and updateTag.

Yes, cache components replace older experimental flags with a clear, predictable caching model in Next.js 16, letting you combine static rendering and dynamic updates within one page without complex configuration.

Partial Prerendering works for dashboards by serving a fast static shell while handling per-user data that benefits from selective revalidation, making it suitable for data-driven UIs and content-rich pages.

You apply the use cache directive in your page components and utilize cacheLife and cacheTag to control selective revalidation, ensuring cached fetches update predictably without rendering the entire route dynamically.

Cache components solve the complexity of mixing static, cached, and dynamic content in Next.js routes, reducing render times and improving responsiveness for content-heavy pages needing real-time updates.