Agent skill · software engineering · laguagu
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Use when implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, managing 'use cache: private' for compliance scenarios, pass-through/interleaving patterns, GET Route Handler caching, debugging cache issues, and reviewing Cache Component implementations.
Why this skill is useful
Provides specific patterns and commands for implementing Next.js Cache Components that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
Next.js Cache Components Auto-activation: Activate this skill automatically in Next.js projects that have cacheComponents: true in next.config.ts/next.config.js. When detected, apply Cache Components patterns to all Server Component authoring, data fetching, and caching decisions. Project Detection When starting work in a Next.js project, check if Cache Components are enabled: If cacheComponents: true is found, apply this skill's patterns proactively when: Writing React Server Components Implementing data fetching Creating Server Actions with mutations Optimizing page performance Reviewing existing component code Cache Components enable Partial Prerendering (PPR) - mixing static HTML shells with dynamic streaming content for optimal performance. Cache Components also enable state preservation during navigation with React's <Activity> component, which can keep cached component trees mounted but hidden. Philosophy: Code Over Configuration Cache Components represents a shift from segment configuration to compositional code: Before (Deprecated) After (Cache Components) --------------------------------------- ----------------------------------------- export const revalidate = 3600 cacheLife('hours') inside 'use cache' export const dynamic = 'force-static' Use 'use cache' and Suspense boundaries All-or-nothing static/dynamic Granular: static shell + cached + dynamic Key Principle: Components co-locate their caching, not just their data. Next.js provides build-time feedback to guide you toward optimal patterns. Core Concept Mental Model: The Caching Decision Steps When writing a React Server Component, walk through these steps in order: 1. Does the component fetch data or perform I/O? No → pure component, nothing to decide. Yes → continue. 2. Does it depend on request context (cookies(), headers(), searchParams)? No → continue to step 3. Yes → continue to step 4. 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/cache-components