cache-components
Cache Components guides you through Next.js's compositional caching model for Server Components, replacing segment-level configuration with granular, code-based control. Learn when to apply 'use cache', configure cache lifetimes and tags, invalidate stale data, and balance static shells with dynamic streaming content for optimal performance.
Cache Components teaches you to implement 'use cache' directive and caching APIs in Next.js Server Components.
AI-generated summary based on this skill's SKILL.md
Install
laguagu/claude-code-nextjs-skills/cache-components · repository language: TypeScript
git clone https://github.com/laguagu/claude-code-nextjs-skills
cp -r claude-code-nextjs-skills/skills/cache-components ~/.claude/skills/cache-componentsnpx skillfed install laguagu/claude-code-nextjs-skills/cache-componentsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use the cache directive in Next.js?
Cache Components uses the 'use cache' directive to mark Server Components and async functions for caching. Add 'use cache' at the top of a Server Component or async function body to enable caching with a default lifetime. Combine it with cacheLife() to set custom durations and cacheTag() to label cached segments for later invalidation. This replaces older segment-level revalidate exports with granular, code-based control.
What is Partial Prerendering and how do I set it up?
Cache Components supports Partial Prerendering (PPR) to optimize static vs dynamic content boundaries. PPR prerendered static shells at build time while streaming dynamic content at request time. Enable it in next.config.js with ppr: 'incremental', then use 'use cache' and Suspense boundaries to mark which parts render statically and which stream dynamically, balancing performance with personalization.
How do I invalidate cache with revalidateTag after mutations?
Cache Components lets you tag cached content with cacheTag() and invalidate it after mutations using revalidateTag() or updateTag(). When a Server Action or API route mutates data, call revalidateTag('tag-name') to purge all cached segments labeled with that tag. This ensures fresh data flows to users without full page rebuilds, keeping your caching strategy responsive to data changes.
When should I use 'use cache' versus Suspense in Server Components?
Cache Components distinguishes between caching and streaming: use 'use cache' to memoize expensive computations and data fetches across requests, and use Suspense to stream content progressively within a single request. Combine them—wrap cached async functions in Suspense boundaries to cache the result while still streaming the UI. This pattern creates efficient static shells with dynamic, personalized content.
How do I debug cache component issues and build-time feedback errors?
Cache Components provides build-time feedback when 'use cache' is misused—for example, accessing runtime data like cookies or headers inside a cached function. Check Next.js build logs for errors indicating which lines violate cache constraints. Use cacheLife() and cacheTag() explicitly to clarify intent, and test with next build to catch issues before deployment.
What are best practices for caching strategy in Next.js Server Components?
Cache Components best practices include: mark pure data fetches with 'use cache' and appropriate cacheLife durations; use cacheTag() to group related cached segments; invalidate with revalidateTag() after mutations; combine 'use cache' with Suspense for streaming; keep runtime-dependent logic outside cached functions; and enable Partial Prerendering to separate static shells from dynamic content for optimal performance.
SKILL.md
rendered from the published skill — quoted content, verbatim
Next.js Cache Components
> Auto-activation: Activate this skill automatically in Next.js projects that have
> cacheComponents: true in next.config.ts/next.config.js. When detected, apply Cache
> Components patterns to all Server Component authoring, data fetching, and caching decisions.
Project Detection
When starting work in a Next.js project, check if Cache Components are enabled:
# Check next.config.ts or next.config.js for cacheComponents
grep -r "cacheComponents" next.config.* 2>/dev/null
If cacheComponents: true is found, apply this skill's
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/cache-components/PATTERNS.md
skills/cache-components/REFERENCE.md
skills/cache-components/SKILL.md
skills/cache-components/TROUBLESHOOTING.md