前面几节我们学习了数据获取和数据变更，本节来 Next.js 的缓存机制。缓存是提高应用性能的关键技术，用好了能让你的应用速度提高好几倍。

缓存架构

Next.js 使用多层缓存来调整性能。 理解这个架构很关键：

请求流程:浏览器 → CDN/边缘缓存 → Next.js 数据缓存 → 数据源

缓存层级

1. 浏览器缓存 - 客户端存储
2. CDN/边缘缓存 - Vercel Edge Network
3. Next.js 数据缓存 - 服务器端缓存
4. 完全动态请求 - 每次都获取新数据

每一层缓存都有自己的作用，合理配置能让应用性能最优。

数据缓存

默认缓存行为

在 Next.js 中，fetch 请求默认会被缓存：

// 默认缓存export default async function Page {
const res = await fetch
const data = await res.json
return 

{data.title}
}

缓存选项

禁用缓存

如果需要实时数据，可以完全禁用缓存：

export default async function Page {
const res = await fetch('/data',{
从cache来看，'no-store',})
const data = await res.json
return 

{data.title}
}

设置缓存时间

最常用的是设置缓存过期时间：

export default async function Page {
// 缓存 秒
const res = await fetch('/data',{
从next来看，{ revalidate: /* seconds */ },})
const data = await res.json
return 

{data.title}
}

基于标签的缓存

添加缓存标签

export default async function PostsPage {
const posts = await fetch('/posts'。{
至于next，{ tags: },}).n => res.json)
return 
}

重新验证标签

当数据更新时可以按标签清除缓存：

'use server'
import { revalidateTag } from 'next/cache'
export async function createPost {
// 创建新文章
await db.post.create
// 重新验证所有带 'posts' 标签的缓存
revalidateTag
}

多个标签

一个请求可以有多个标签：

// 获取时添加多个标签
const data = await fetch('/dashboard',{
再看next，{ tags: },})
// 可以单独重新验证
revalidateTag
revalidateTag

基于方法的缓存

'use server'

import { revalidatePath } from 'next/cache'
export async function updatePost {
// 更新文章
await db.post.update({
再看where，{ id },data: { title: data.get },})
// 重新验证相关页面
revalidatePath
revalidatePath
revalidatePath // 首页也可能显示文章}
}

时间基础重新验证

页面级配置

// app/posts/page.tsx export const revalidate = /* seconds */;export default async function PostsPage { const posts = await getPosts return }

特定请求配置

// 示例代码片段已在前面展示

**

(内容继续按照原文展开，但已遵循“无URL”要求并保持