cache-components

What problem does it solve?

This Skill provides expert guidance for implementing Next.js Cache Components and Partial Prerendering (PPR). It auto-activates in projects that set cacheComponents: true in next.config, helping teams co-locate caching decisions with components and achieve a static shell plus dynamic streaming experience.

Core Features & Use Cases

• Proactive activation when cacheComponents is detected in next.config.ts/next.config.js, ensuring patterns are applied across React Server Components, data fetching, and Server Actions.
• Guidance on using the 'use cache' directive, cacheLife, cacheTag, updateTag, revalidateTag, and revalidatePath for precise invalidation, shared caches, and SWR-style background refresh.
• Strategies for building pages with static shells, cached components, and Suspense-wrapped dynamic sections, including generateStaticParams subshells and multi-level caching.
• Built-in guidance for debugging, performance tuning, and avoiding common anti-patterns to maximize cache effectiveness.

Quick Start

Enable Cache Components in next.config by setting cacheComponents: true, wrap data fetching with 'use cache' and corresponding cache APIs, tag caches with cacheTag, invalidate with updateTag or revalidateTag, and compose pages with a static shell plus cached blocks and Suspense for dynamic content.