next-cache-components

What problem does it solve?

Next.js Cache Components enables precise partial prerendering by combining static, cached, and dynamic content in a single route, reducing server load and improving response times.

Core Features & Use Cases

• Enable cache components globally via next.config.ts (cacheComponents: true)
• Use 'use cache' directive at file, component, or function level with optional cacheLife, cacheTag, and updateTag for fine-grained invalidation
• Support three content types: Static, Cached, Dynamic for varied UX scenarios (static shell, cached data, realtime updates)
• Use cases include dashboards, e-commerce product lists, and user-specific pages needing fresh data without full re-render

Quick Start

Enable cache components in a Next.js project by setting cacheComponents: true in next.config.ts, then annotate your components or functions with 'use cache' and optionally apply cacheLife and cacheTag to control caching behavior. Build and run the app to verify partial prerendering performance.