next-cache-components

Cache Components enable Partial Prerendering in Next.js to mix static and dynamic content in a single route. Static content prerenders at build time, while dynamic sections stream via React Suspense.

The 'use cache' directive in Next.js is used to create cached blocks for data fetching. It works with cacheLife to apply selective caching and predictable revalidation for pages mixing static and dynamic data.

Configuring cache components in next.config.ts involves enabling the cacheComponents setting. You then annotate data-fetching functions with the 'use cache' directive to activate selective caching.

Yes, cacheLife and cacheTag can be used inside server actions, API routes, and components. This enables selective caching and predictable revalidation while respecting runtime data constraints.

Avoid using Cache Components for data fetching when your application cannot respect runtime data constraints. They are designed for pages needing predictable revalidation rather than purely dynamic real-time data.

Yes, Next.js Partial Prerendering works with React Suspense to stream fresh data. It separates static content from dynamic sections, ensuring cached blocks use 'use cache' while dynamic areas fetch fresh data.