cache-components

To use 'use cache' with Next.js Cache Components, annotate data fetchers and configure cache lifetimes using APIs like cacheLife and cacheTag. This enables Partial Prerendering by building static shells with streaming dynamic content wrapped in Suspense.

Invalidate cached data in Next.js Cache Components by using updateTag, revalidateTag, or revalidatePath. These APIs allow you to selectively refresh cached content when underlying data changes, maintaining hybrid static and dynamic page performance.

The best way to migrate deprecated Next.js exports to Cache Components patterns is to replace them with 'use cache' directives and lifecycle APIs like cacheLife and cacheTag. This Skill provides migration guidance and troubleshooting steps for a smooth transition.

Enabling cacheComponents in next.config does not automatically cache everything, but it does proactively adapt patterns to guide developers. You must explicitly annotate data fetchers with 'use cache' and configure invalidation to build high-performance hybrid pages.

Partial Prerendering may not stream correctly if dynamic content is not properly wrapped in Suspense or if cache lifetimes are misconfigured. This Skill provides troubleshooting steps to ensure static shells compose properly with streaming dynamic content.