{"enrichment":{"faq":[{"a":"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.","q":"How do I use the cache directive in Next.js?"},{"a":"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.","q":"What is Partial Prerendering and how do I set it up?"},{"a":"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.","q":"How do I invalidate cache with revalidateTag after mutations?"},{"a":"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\u2014wrap 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.","q":"When should I use 'use cache' versus Suspense in Server Components?"},{"a":"Cache Components provides build-time feedback when 'use cache' is misused\u2014for 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.","q":"How do I debug cache component issues and build-time feedback errors?"},{"a":"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.","q":"What are best practices for caching strategy in Next.js Server Components?"}],"shadow_tags":["partial-prerendering","cache-invalidation","server-component-patterns","request-deduplication","static-shell-rendering","streaming-content","cache-key-strategy","compliance-caching","build-time-validation"],"summary_rewrite":"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."},"files":[{"bytes":15591,"path":"skills/cache-components/SKILL.md","sha256":"c20fa573488378b06eff319f4760266eb8bfd4a3d0f32e1f2c4308b49a3ebda9","url":"https://skillfed.io/files/laguagu/claude-code-nextjs-skills/cache-components/5c46bd1a/SKILL.md"}],"id":"laguagu/claude-code-nextjs-skills/cache-components","links":{"html":"https://skillfed.io/laguagu/claude-code-nextjs-skills/cache-components","md":"https://skillfed.io/laguagu/claude-code-nextjs-skills/cache-components.md","repo":"https://github.com/laguagu/claude-code-nextjs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":17,"language":"TypeScript","last_updated":"2026-07-27","license":"MIT","name":"cache-components","publisher":"laguagu","stars":57},"relations":{"similar":[{"id":"sangrokjung/claude-forge/cache-components"},{"id":"vercel-labs/openreview/next-cache-components"},{"id":"sanity-io/next-sanity/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":"laguagu/claude-code-nextjs-skills/nextjs-shadcn"},{"id":"pproenca/dot-skills/nextjs-ppr-patterns"},{"id":"sanity-io/next-sanity/sanity-live-cache-components"}]},"slug":{"owner":"laguagu","repo":"claude-code-nextjs-skills","skill":"cache-components"},"version":"5c46bd1a"}