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

•

개발자 도구

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

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.

주요 기능

01Provides expert guidance on parameter permutations and subshell generation for static safety

02Optimizes Partial Prerendering (PPR) boundaries using Suspense for dynamic streaming

03Configures granular cache lifetimes using the cacheLife API and predefined profiles

04137,158 GitHub stars

05Manages complex data invalidation through cacheTag, updateTag, and revalidateTag

06Automates implementation of 'use cache' directives in React Server Components

사용 사례

01Debugging cache invalidation logic and resolving 'Accessing uncached data outside Suspense' errors

02Implementing Partial Prerendering for high-performance apps with mixed static and dynamic content

03Migrating legacy revalidate and dynamic segment configurations to modern code-based caching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vercel/next.js cache-components

For use in Claude.ai and ChatGPT

Download Skill