next-cache-components

预期结果:

Use the 'use cache' directive at the function level:

```tsx
async function getBlogPosts() {
'use cache'
cacheLife('hours')

const posts = await db.posts.findMany()
return posts
}
```

This caches the function result with hourly revalidation. The cache key includes the build ID, function location, and closure variables.

预期结果:

Use cacheTag() to tag cached content and updateTag() or revalidateTag() to invalidate:

```tsx
// Tag during caching
async function getProduct(id: string) {
'use cache'
cacheTag('products', `product-${id}`)
return db.products.findUnique({ where: { id } })
}

// Invalidate on update
'use server'
export async function updateProduct(id: string, data: FormData) {
await db.products.update({ where: { id }, data })
updateTag(`product-${id}`) // Immediate invalidation
}
```

预期结果:

**1. Static** - Synchronous code, imports, pure computations. Prerendered at build time.

**2. Cached** - Async data with 'use cache' directive. Served from cache with optional revalidation.

**3. Dynamic** - Runtime data in Suspense boundaries. Streams in fresh on each request.

Mix all three in one page:
```tsx
export default function Page() {
return (
<>
<Header /> {/* Static */}
<Stats /> {/* Cached with 'use cache' */}
<Suspense fallback={<Loading />}>
<UserData /> {/* Dynamic - streams in */}
</Suspense>
</>
)
}
```