本文旨在讲解如何在 Next.js 13 的 App Directory 中实现按需重新验证 (On-Demand Revalidation)。通过 revalidateTag 和 revalidatePath，开发者可以精确控制特定页面或数据标签的缓存失效，从而在数据更新时触发页面重建，避免了全局定时重新构建的低效性。
在 Next.js 13 的 App Directory 中，按需重新验证 (On-Demand Revalidation) 是一种强大的特性，它允许开发者在特定事件发生时，精确地使缓存失效并重新生成页面。这与传统的基于时间的重新验证 (Time-Based Revalidation) 形成对比，后者需要定期重新构建整个站点或特定页面，效率较低。按需重新验证则更加灵活和高效，特别适用于需要实时更新数据的场景，例如博客文章更新、用户资料修改等。
使用 revalidateTag 进行数据标签重新验证
revalidateTag 允许你基于特定的数据标签来使缓存失效。这意味着你可以为你的数据请求添加标签，然后在数据更新时，通过 revalidateTag 来触发所有使用该标签的页面的重新生成。
以下是一个示例，展示了如何使用 revalidateTag 来重新验证用户数据：
// app/page.js
export default async function Page() {
const user = await fetch("/api/user", { next: { tags: ["user"] } })
.then(res => res.json());
return 我是 {user.name}，我的页面真漂亮;
}在这个例子中，我们使用 fetch 函数获取用户数据，并使用 next: { tags: ["user"] } 为该请求添加了一个名为 "user" 的标签。这意味着 Next.js 会将这个请求的结果与 "user" 标签关联起来。
接下来，我们需要一个触发重新验证的函数。这通常会在数据更新时被调用，例如在用户资料更新后：
// app/form/page.js
import { revalidateTag } from 'next/cache';
export default async function FormPage() {
const updateUser = async (formData) => {
'use server';
const name = formData.get('name');
// 模拟更新用户数据的 API 调用
await fetch("/api/user/update", {
method: 'POST',
body: JSON.stringify({ name }),
});
revalidateTag("user"); // 触发 "user" 标签的重新验证
};
return (
<>
在这个例子中，我们创建了一个名为 updateUser 的 Server Action，它在表单提交时被调用。该函数首先模拟更新用户数据的 API 调用，然后调用 revalidateTag("user") 来触发 "user" 标签的重新验证。这将导致所有使用 "user" 标签的页面（例如上面的 /app/page.js）重新生成，从而显示最新的用户数据。
关键点：
- revalidateTag 必须在 Server Actions 或 Route Handlers 中使用。
- 确保你的数据请求使用了 tags 选项，以便 Next.js 可以正确地跟踪依赖关系。
使用 revalidatePath 进行路径重新验证
revalidatePath 允许你基于特定的路径来使缓存失效。这对于需要在特定页面更新时触发重新生成的场景非常有用。
// app/api/update-blog-post/route.js
import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';
export async function POST(request) {
// ... 处理博客文章更新的逻辑
revalidatePath('/blog/[slug]'); // 重新验证 `/blog/[slug]` 路径
return NextResponse.json({ revalidated: true, now: Date.now() });
}在这个例子中，我们创建了一个 API 路由 /api/update-blog-post，它处理博客文章的更新。在更新完成后，我们调用 revalidatePath('/blog/[slug]') 来触发 /blog/[slug] 路径的重新验证。这将导致所有匹配该路径的页面（例如 /blog/my-first-post）重新生成，从而显示最新的博客文章内容。
关键点：
- revalidatePath 必须在 Server Actions 或 Route Handlers 中使用。
- 你可以使用通配符 [slug] 来匹配动态路由。
注意事项和总结
- 按需重新验证是 Next.js 13 App Directory 中一项强大的特性，它允许你精确控制缓存失效和页面重新生成。
- revalidateTag 适用于基于数据标签的重新验证，而 revalidatePath 适用于基于路径的重新验证。
- 确保在 Server Actions 或 Route Handlers 中使用 revalidateTag 和 revalidatePath。
- 合理使用按需重新验证可以提高应用程序的性能和用户体验，避免不必要的重新构建。
通过合理利用 revalidateTag 和 revalidatePath，开发者可以构建出更加动态和响应式的 Next.js 应用程序，满足各种实时数据更新的需求。
