next-cache-components

Partial prerendering in Next.js 16 mixes static, cached, and dynamic content in a single route. It prerenders static shells at build time while using Suspense boundaries to render fresh data on demand, ensuring instant delivery.

Apply the use cache directive within route blocks to enable data reuse across requests. Configure cacheLife to control revalidation lifetimes and assign cacheTag for precise invalidation, allowing specific cached segments to update efficiently.

Activate the cacheComponents setting in your next.config.ts file to enable cache components. This configuration allows you to start experimenting with static, cached, and dynamic content using inline use cache directives on your sample routes.

Accessing cookies and headers within cached segments requires handling runtime constraints. Dynamic sections wrapped in Suspense render fresh data on demand, allowing you to safely request runtime data without breaking the prerendered static shell.

The best way to invalidate cached data in partial prerendering is using cacheTag and updateTag. Assign cacheTag to specific cached blocks and trigger updateTag for precise invalidation, controlling revalidation lifetimes without refreshing the entire route.