104 lines
2.8 KiB
Markdown
104 lines
2.8 KiB
Markdown
# Cache Components: `use cache` & `cacheLife`
|
|
|
|
> [!IMPORTANT]
|
|
> This is a Next.js 16+ specific skill. Do NOT apply these patterns to Next.js 15 or earlier without explicitly checking compatibility.
|
|
|
|
## Core Philosophy
|
|
Next.js 16 marks the transition from "Segment-level caching" to "Component-level caching". We no longer rely on `export const revalidate = 3600`. Instead, we use granular directives and profiles.
|
|
|
|
## 1. The `use cache` Directive
|
|
The `use cache` directive can be applied to **Server Components** or **Functions**.
|
|
|
|
### Rule: Granular Application
|
|
Wrap only the data-fetching logic or the specific component that needs caching.
|
|
|
|
```tsx
|
|
// Good: Granular function caching
|
|
async function getProduct(id: string) {
|
|
'use cache'
|
|
return await db.product.findUnique({ where: { id } })
|
|
}
|
|
|
|
// Good: Component-level caching
|
|
export default async function ProductCard({ id }: { id: string }) {
|
|
'use cache'
|
|
const product = await getProduct(id)
|
|
return <div>{product.name}</div>
|
|
}
|
|
```
|
|
|
|
## 2. Using `cacheLife`
|
|
`cacheLife` defines the "Freshness" and "Staleness" of a cached item using pre-defined or custom profiles.
|
|
|
|
### Usage Pattern
|
|
```tsx
|
|
import { cacheLife } from 'next/cache'
|
|
|
|
async function getStockInfo() {
|
|
'use cache'
|
|
cacheLife('minutes') // Using a pre-defined profile
|
|
return await fetchStocks()
|
|
}
|
|
```
|
|
|
|
### Profile Reference
|
|
- `default`: Base profile (1 year stale time).
|
|
- `seconds`: High-frequency updates.
|
|
- `minutes`: Standard dynamic content.
|
|
- `hours`: Stable content (e.g., blog posts).
|
|
- `days`: Semi-static content.
|
|
- `weeks`: Static-like content.
|
|
- `max`: Permanent cache until invalidated.
|
|
|
|
## 3. On-Demand Invalidation with `cacheTag`
|
|
`cacheTag` allows you to label cached data for selective purging.
|
|
|
|
### Implementation
|
|
```tsx
|
|
import { cacheTag } from 'next/cache'
|
|
|
|
async function getProfile(user: string) {
|
|
'use cache'
|
|
cacheTag(`profile-${user}`)
|
|
return await db.user.findUnique(...)
|
|
}
|
|
```
|
|
|
|
### Revalidation
|
|
In a Server Action:
|
|
```tsx
|
|
import { revalidateTag, updateTag } from 'next/cache'
|
|
|
|
export async function updateProfile(user: string, data: any) {
|
|
await db.user.update(...)
|
|
|
|
// Choice A: Background revalidation (Stale-While-Revalidate)
|
|
revalidateTag(`profile-${user}`)
|
|
|
|
// Choice B: Immediate "Read-Your-Writes" update
|
|
updateTag(`profile-${user}`)
|
|
}
|
|
```
|
|
|
|
## 4. Partial Pre-Rendering (PPR)
|
|
Next.js 16 stabilizes PPR via the `cacheComponents` flag in `next.config.ts`.
|
|
|
|
### Pattern: Suspense Boundaries
|
|
Always wrap dynamic "Cache Components" in `<Suspense>` to enable PPR.
|
|
|
|
```tsx
|
|
import { Suspense } from 'react'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<main>
|
|
<h1>Static Header</h1>
|
|
<Suspense fallback={<Skeleton />}>
|
|
<DynamicCacheComponent />
|
|
</Suspense>
|
|
</main>
|
|
)
|
|
}
|
|
```
|