cache-components

To configure Next.js Cache Components, enable cacheComponents: true in next.config.ts, add 'use cache' to data-fetching functions, tag them with cacheTag(), and set lifetimes using cacheLife(). This co-locates caching with components for granular static and dynamic rendering.

Partial Prerendering (PPR) enables granular static and dynamic rendering in Next.js. You need to wrap dynamic, non-cached content in Suspense with a fallback skeleton when cacheComponents is true to catch dynamic data outside Suspense at build time.

To invalidate cached data in Next.js server actions, use updateTag() or revalidateTag() to manage cache invalidations. The Skill automates these best-practice caching decisions across data fetching, server actions, and UI composition.

It works with existing Next.js server components by providing in-context recommendations to review and improve current implementations for Partial Prerendering, accelerating adoption and ensuring best practices when cacheComponents is true.

Builds fail because enabling cacheComponents requires dynamic data outside Suspense to be caught. You must wrap dynamic, non-cached content with Suspense and provide a fallback skeleton to enforce API contracts and pass build-time guidance.

The best way to determine what to cache is using automated best-practice guidance that applies across data fetching, server actions, and UI composition to decide what to cache, how to invalidate, and where to use Suspense.