cache-components

Enable Partial Prerendering by setting cacheComponents: true in next.config.ts, then use the 'use cache' directive in Server Components to wrap data-fetching logic. Tag cached sections with cacheTag and invalidate using updateTag or revalidateTag to achieve static shells with dynamic streaming content.

Invalidate cached components using updateTag or revalidateTag to trigger background refresh, or revalidatePath for path-based invalidation. Use cacheTag to group related cached sections so invalidation affects only the intended blocks, avoiding unnecessary recomputation across your entire page.

Build pages by combining a static shell (prerendered at build time), cached component blocks tagged with cacheTag and wrapped in 'use cache', and Suspense-wrapped dynamic sections. This architecture streams dynamic content to users while serving the cached portions immediately from the static shell.

Yes, cacheLife defines cache duration for a component or data fetch, while cacheTag labels cached sections for grouped invalidation. Use both together to set retention policies and enable precise, tag-based revalidation without purging unrelated cached blocks.

Avoid placing 'use cache' around Client Components, co-locating cache logic separately from components, or invalidating entire pages when partial tags suffice. Also prevent over-caching dynamic content and neglecting Suspense boundaries, which reduce streaming benefits and defeat Partial Prerendering's performance gains.

Yes, Cache Components guidance covers Server Actions alongside React Server Components and data fetching. Apply 'use cache', cacheLife, and cacheTag patterns to Server Actions to control mutation-triggered invalidations and maintain consistent cache behavior across your application.