cache-components

# 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: ```bash # Check next.config.ts or next.config.js for cacheComponents grep -r "cacheComponents" next.config.* 2>/dev/null ``` 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 cons...