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
Install
sangrokjung/claude-forge/cache-components · repository language: Shell
git clone https://github.com/sangrokjung/claude-forge
cp -r claude-forge/skills/cache-components ~/.claude/skills/cache-componentsnpx skillfed install sangrokjung/claude-forge/cache-componentsFrequently 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)
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