next-cache-components

Partial prerendering in Next.js 16 combines static, cached, and dynamic content within a single route by applying the use cache directive to cached segments and using Suspense boundaries for fresh dynamic data.

To cache Next.js components, enable cacheComponents in your Next.js 16 configuration and apply the use cache directive directly within your components. This automatically caches the component output for faster subsequent loads.

cacheLife defines the duration a cached component remains valid before automatic revalidation, while cacheTag assigns identifiers for targeted manual invalidation. You use cacheTag with updateTag to purge specific cached data on demand.

Yes, Next.js partial prerendering uses Suspense boundaries to separate static cached shells from dynamic content. Suspense allows the server to stream fresh data asynchronously without blocking the initial prerendered HTML response.

Yes, cache components are designed for typical app routes and dashboards. You can apply use cache to static segments and wrap dynamic dashboard data in Suspense to combine partial prerendering with live fresh data fetching.

You invalidate cached Next.js component data by assigning a cacheTag to the cached component and then calling updateTag with that specific tag. This purges the associated cache entries and forces a fresh data fetch on the next request.