cache-components
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.
Cache Components teaches you to implement 'use cache' directive and manage cache lifecycles with cacheLife() and cacheTag() APIs in Next.js.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-16
Cache Components teaches you to implement 'use cache' directive and manage cache lifecycles with cacheLife() and cacheTag() APIs in Next.js. 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.
Use it when
- Cache Components lets you choose: use 'use cache' with cacheLife() for static or infrequently-changing content that should persist.
- Cache Components requires configuration in your next.config.js file to enable Partial Prerendering (PPR).
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
sangrokjung/claude-forge/cache-components · repository language: Shell
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 'use cache' directive in cache-components?
Cache Components uses the 'use cache' directive to mark server components and functions for caching. Place 'use cache' at the top of a server component or async function to enable caching for that scope. Combine it with cacheLife() to set expiration times and cacheTag() to label cached data for later invalidation. This replaces segment-level configuration with granular, code-based cache control throughout your Next.js application.
What's the difference between cache and Suspense for static vs dynamic content?
Cache Components lets you choose: use 'use cache' with cacheLife() for static or infrequently-changing content that should persist across requests, or use Suspense boundaries for dynamic content that streams on-demand. Cache creates a static shell prerendered at build time or on first request; Suspense delays rendering until data arrives. Combine both—cached outer layers with Suspense-wrapped dynamic inner components—for optimal performance and user experience.
How do I set up Cache Components in next.config and enable PPR?
Cache Components requires configuration in your next.config.js file to enable Partial Prerendering (PPR). Add the experimental cacheComponents flag and configure PPR settings to allow static shells to render at build time while dynamic sections stream later. This setup lets you architect pages with cached components forming a prerendered skeleton and Suspense boundaries for runtime data, maximizing performance without sacrificing interactivity.
How do I invalidate caches with updateTag or revalidateTag after mutations?
Cache Components provides updateTag() and revalidateTag() to invalidate cached data after mutations. Tag your cached data using cacheTag('tag-name') in the 'use cache' block, then call revalidateTag('tag-name') in a Server Action after updating your database. This ensures stale cache entries are purged and fresh data is served on the next request, keeping your application consistent without full page regeneration.
What should I know about cache boundaries and debugging build errors?
Cache Components enforces boundaries between cached and dynamic content; crossing them incorrectly causes build-time feedback errors. Ensure 'use cache' blocks don't reference client state or dynamic values directly. Use the error messages to identify boundary violations and restructure components accordingly. Optimize cache boundaries by isolating static shells from dynamic sections, enabling efficient prerendering and streaming for better performance.
How do cache-components and server actions work together for cache invalidation?
Cache Components integrates with Server Actions to manage cache lifecycle around mutations. Inside a Server Action, call revalidateTag() after updating data to invalidate all cached entries tagged with that label. This pattern—tagging cached queries with cacheTag() and invalidating them via Server Actions—ensures your cached content stays fresh while preserving the performance benefits of prerendering and granular cache control.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js Cache Components
> Auto-activation: This skill activates automatically in projects with cacheComponents: true in next.config.
Project Detection
When starting work in a Next.js project, check if Cache
(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 › “Learn how to implement 'use cache' directive and cacheLife/cacheTag APIs”
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 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.
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.
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.
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.
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)