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
Decision gist · record as of 2026-07-27
Cache Components teaches you to implement 'use cache' directive and caching APIs in Next.js Server 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.
Use it when
- Cache Components supports Partial Prerendering (PPR) to optimize static vs dynamic content boundaries.
- Cache Components lets you tag cached content with cacheTag() and invalidate it after mutations using revalidateTag() or updateTag().
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
laguagu/claude-code-nextjs-skills/cache-components · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 4 files
skills/cache-components/PATTERNS.md
skills/cache-components/REFERENCE.md
skills/cache-components/SKILL.md
skills/cache-components/TROUBLESHOOTING.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement 'use cache' directive and cacheLife/cacheTag APIs in Next.js Server Components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Cache Components guides you through Next.js's compositional caching model, replacing segment-level configuration with granular, code-based cache control. Learn to apply the 'use cache' directive, manage cache lifetimes with cacheLife(), tag data for invalidation with cacheTag(), and architect static shells mixed with cached and dynamic content for optimal performance.
Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
This skill covers 21 rules for implementing Partial Prerendering in Next.js 16 App Router, guiding you through enabling cacheComponents, placing Suspense boundaries, caching with 'use cache', handling runtime APIs, composing pages with parallel streaming, and building forms with mutations. Each rule corrects a specific misconception about the dynamic-by-default rendering model and shows the canonical approach for mixing static chrome with personalized or real-time content.
This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.
Next Cache Components enable Partial Prerendering in Next.js 16, letting you combine prerendered static content, cached async data, and fresh dynamic sections in a single route. The `use cache` directive marks functions for caching with configurable lifetimes via `cacheLife()`, while `cacheTag()` and `updateTag()` handle invalidation. Replaces the older `experimental.ppr` flag and `unstable_cache()` API.
More skills nextjs (MIT)