cache-components

Next.js cache components use co-located 'use cache' directives to generate static shells, streaming dynamic data via Suspense boundaries. You annotate components to separate cached regions from dynamic content, producing fast initial page loads with asynchronous data flows.

For granular data invalidation in Next.js cache components, apply cacheTag() to mark cached regions, then call updateTag() or revalidateTag() to refresh specific data. This ensures precise freshness control without invalidating the entire static shell.

Yes, Next.js cache components support generateStaticParams workflows for progressive rendering. This allows reusable route shells to pre-render static content while dynamic regions stream in, enabling multi-tenant subshells and correct static versus dynamic boundaries.

You control cache lifetimes in Next.js cache components using the cacheLife() function. It distinguishes static from dynamic content by setting flexible expiration policies, ensuring cached regions maintain appropriate freshness levels based on data requirements.

Setting cacheComponents: true in next.config enables the cache components feature, proactively activating the guidance for 'use cache' directives. This ensures strict async placement and proper handling of cacheLife() and cacheTag() APIs across your project.

Use Suspense boundaries in Next.js cache components to stream uncached or dynamic data. They wrap dynamic regions, allowing the static shell to render immediately while asynchronous data loads flow in progressively without blocking the UI.