How does the cache-components skill activate?

The skill activates automatically when Claude detects 'cacheComponents: true' in your project's next.config.js or next.config.ts file.

How does this skill handle Partial Prerendering (PPR)?

It provides a mental model for separating static shells from dynamic streaming content, ensuring dynamic data is correctly wrapped in Suspense boundaries for optimal performance.

Can I use this skill to debug Next.js caching errors?

Yes, it is designed to recognize and provide solutions for common build-time errors such as accessing cookies/headers inside a 'use cache' block or accessing uncached data outside Suspense.

What is the main advantage of Cache Components over segment config?

Cache Components allow for 'Code Over Configuration,' meaning caching logic is co-located within components via the 'use cache' directive rather than being applied to entire routes.

Next.js Cache Components Expert

Name: Next.js Cache Components Expert
Author: vercel

byvercel

•

137,158

Herramientas para Desarrolladores

Optimizes Next.js applications using Cache Components, Partial Prerendering (PPR), and modern granular caching directives.

Acerca de

This skill provides specialized guidance for implementing Next.js Cache Components and Partial Prerendering (PPR) patterns, shifting from deprecated segment configurations to granular, code-level caching. It proactively assists developers in applying the 'use cache' directive, managing cache lifetimes with cacheLife, and implementing robust invalidation strategies with cacheTag and updateTag. By analyzing project configurations, it ensures optimal performance through the strategic separation of static shells and dynamic streaming content, helping developers navigate the latest Next.js architectural patterns with build-time feedback and best practices.

Características Principales

Provides expert guidance on parameter permutations and subshell generation for static safety
Optimizes Partial Prerendering (PPR) boundaries using Suspense for dynamic streaming
Configures granular cache lifetimes using the cacheLife API and predefined profiles
137,158 GitHub stars
Manages complex data invalidation through cacheTag, updateTag, and revalidateTag
Automates implementation of 'use cache' directives in React Server Components

Casos de Uso

Debugging cache invalidation logic and resolving 'Accessing uncached data outside Suspense' errors
Implementing Partial Prerendering for high-performance apps with mixed static and dynamic content
Migrating legacy revalidate and dynamic segment configurations to modern code-based caching

Acerca de

Características Principales

Provides expert guidance on parameter permutations and subshell generation for static safety
Optimizes Partial Prerendering (PPR) boundaries using Suspense for dynamic streaming
Configures granular cache lifetimes using the cacheLife API and predefined profiles
137,158 GitHub stars
Manages complex data invalidation through cacheTag, updateTag, and revalidateTag
Automates implementation of 'use cache' directives in React Server Components

Casos de Uso

Debugging cache invalidation logic and resolving 'Accessing uncached data outside Suspense' errors
Implementing Partial Prerendering for high-performance apps with mixed static and dynamic content
Migrating legacy revalidate and dynamic segment configurations to modern code-based caching