next-cache-components

Cache components in Next.js enable Partial Prerendering by blending static, cached, and dynamic rendering within a single route. You enable cacheComponents in your config and use the use cache directive with cacheLife and cacheTag for selective freshness.

Suspense streams runtime-specific content while keeping cached portions responsive. By wrapping dynamic UI in Suspense, you avoid request-time constraints inside cached functions and allow cached data to serve instantly.

You invalidate cached data by using the cacheTag directive alongside use cache to control targeted invalidation. The updateTag function allows you to manually refresh specific cached segments without invalidating the entire route.

You must pass request-derived values as function arguments to respect runtime-data constraints. Alternatively, use the use cache: private directive to handle user-specific or request-dependent data safely within cached boundaries.

Partial Prerendering suits product catalogs, dashboards, and blog pages where part of the content can be fast-cached while user-specific UI remains dynamic. This approach improves perceived performance while keeping critical data fresh.

You tune cache staleness and revalidation by applying the cacheLife directive within your use cache block. This allows you to set precise expiration times for cached server components across App Router routes.