cache-components

To implement Next.js Cache Components, use the 'use cache' directive in React Server Components and configure cache lifetimes with cacheLife(). This skill automates proactive guidance for authoring components, defining static-vs-dynamic boundaries, and setting up Partial Prerendering.

Partial Prerendering is needed when mixing static and dynamic content in Next.js. It uses Suspense boundaries to prerender static portions instantly while streaming dynamic data, improving initial load performance without sacrificing dynamic features.

To invalidate cached data in Next.js, assign cacheTag() to cached boundaries and trigger revalidation via updateTag() or revalidateTag(). This ensures targeted cache invalidation without clearing unrelated cached component data.

Yes, this skill auto-activates when it detects `cacheComponents: true` in next.config. It proactively guides component authoring, data fetching, and debugging for safe cache usage without manual invocation.

Incorrect caching often stems from misplaced static-vs-dynamic boundaries or improper Suspense boundaries. Review your 'use cache' directives and cacheLife() configurations to ensure safe and correct cache usage.

The best way to define boundaries for Partial Prerendering is wrapping dynamic sections in Suspense boundaries. This allows static content to prerender while dynamic data fetches stream in asynchronously.