next-cache-componentslisted
Install: claude install-skill aiskillstore/marketplace
# Cache Components (Next.js 16+)
Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route.
## Enable Cache Components
```ts
// next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfig
```
This replaces the old `experimental.ppr` flag.
---
## Three Content Types
With Cache Components enabled, content falls into three categories:
### 1. Static (Auto-Prerendered)
Synchronous code, imports, pure computations - prerendered at build time:
```tsx
export default function Page() {
return (
<header>
<h1>Our Blog</h1> {/* Static - instant */}
<nav>...</nav>
</header>
)
}
```
### 2. Cached (`use cache`)
Async data that doesn't need fresh fetches every request:
```tsx
async function BlogPosts() {
'use cache'
cacheLife('hours')
const posts = await db.posts.findMany()
return <PostList posts={posts} />
}
```
### 3. Dynamic (Suspense)
Runtime data that must be fresh - wrap in Suspense:
```tsx
import { Suspense } from 'react'
export default function Page() {
return (
<>
<BlogPosts /> {/* Cached */}
<Suspense fallback={<p>Loading...</p>}>
<UserPreferences /> {/* Dynamic - streams in */}
</Suspense>
</>
)
}
async function UserPreferences() {
const theme = (await cookies()).get('theme')?.value
return <p>Theme: {theme}</p>
}
```
---
## `use cache` Directive
### F