{"enrichment":{"faq":[{"a":"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.","q":"How do I use the 'use cache' directive in cache-components?"},{"a":"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\u2014cached outer layers with Suspense-wrapped dynamic inner components\u2014for optimal performance and user experience.","q":"What's the difference between cache and Suspense for static vs dynamic content?"},{"a":"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.","q":"How do I set up Cache Components in next.config and enable PPR?"},{"a":"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.","q":"How do I invalidate caches with updateTag or revalidateTag after mutations?"},{"a":"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.","q":"What should I know about cache boundaries and debugging build errors?"},{"a":"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\u2014tagging cached queries with cacheTag() and invalidating them via Server Actions\u2014ensures your cached content stays fresh while preserving the performance benefits of prerendering and granular cache control.","q":"How do cache-components and server actions work together for cache invalidation?"}],"shadow_tags":["server-component-caching","partial-prerendering","cache-invalidation","static-shell-rendering","dynamic-streaming","cache-key-strategy","request-context-handling","build-time-validation","stale-while-revalidate","compositional-caching"],"summary_rewrite":"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."},"files":[{"bytes":16338,"path":"skills/cache-components/SKILL.md","sha256":"067eaa1d937725099d91f3a246e3d8b2a083fb0f928479da92883609792130d0","url":"https://skillfed.io/files/sangrokjung/claude-forge/cache-components/36cc664c/SKILL.md"}],"id":"sangrokjung/claude-forge/cache-components","links":{"html":"https://skillfed.io/sangrokjung/claude-forge/cache-components","md":"https://skillfed.io/sangrokjung/claude-forge/cache-components.md","repo":"https://github.com/sangrokjung/claude-forge"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":169,"language":"Shell","last_updated":"2026-07-16","license":"MIT","name":"cache-components","publisher":"sangrokjung","stars":790},"relations":{"similar":[{"id":"laguagu/claude-code-nextjs-skills/cache-components"},{"id":"sanity-io/next-sanity/next-cache-components"},{"id":"vercel-labs/openreview/next-cache-components"},{"id":"charlietlamb/openlogs/next-cache-components"},{"id":"joelhooks/joelclaw/nextjs-static-shells"},{"id":"yonatangross/orchestkit/react-server-components-framework"},{"id":"mohamed-hossam1/nextjs-skills/nextjs-cache-architecture"},{"id":"pproenca/dot-skills/nextjs-ppr-patterns"},{"id":"laguagu/claude-code-nextjs-skills/nextjs-shadcn"},{"id":"JosiahSiegel/claude-plugin-marketplace/nextjs-caching"}]},"slug":{"owner":"sangrokjung","repo":"claude-forge","skill":"cache-components"},"version":"36cc664c"}