本文详细介绍了如何在 Next.js 13 的 App Directory 中实现按需重新验证。通过 `revalidateTag` 和 `revalidatePath` 函数，开发者可以在特定事件触发时，精确地重新生成指定的页面或数据，而无需全局重建整个站点，从而优化性能并提升用户体验。文章包含代码示例，帮助你快速上手。
Next.js 13 的 App Directory 引入了强大的数据获取和缓存机制，极大地简化了之前使用 getServerSideProps 或 getStaticProps 的复杂性。然而，在某些场景下，我们需要在特定事件发生时，例如接收到 Webhook 通知后，立即更新页面内容。这时，按需重新验证（On-Demand Revalidation）就显得尤为重要。本文将深入探讨如何在 Next.js 13 的 App Directory 中实现按需重新验证，并提供实用的代码示例。
使用 revalidateTag 实现基于标签的重新验证
revalidateTag 允许你根据特定的标签来重新验证缓存。首先，你需要在使用 fetch 获取数据时，为数据添加一个标签。
export default async function Page() {
const user = await fetch("/api/user", { next: { tags: ["user"] } }); // 注意这里使用 tags 而不是 tag
const userData = await user.json();
return I am {userData.name}, my page is beautiful;
}在上面的代码中，我们使用 fetch 从 /api/user 获取用户数据，并为该数据添加了 user 标签。 注意：是 tags 属性，传入一个字符串数组。
接下来，在需要触发重新验证的地方，例如在处理表单提交或 Webhook 请求的 API 路由中，调用 revalidateTag 函数：
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';
export async function POST(request) {
const data = await request.json();
// 更新用户数据
// await updateUser(data);
revalidateTag('user');
return NextResponse.json({ revalidated: true, now: Date.now() });
}当 /api/update-user 接收到 POST 请求时，我们调用 revalidateTag('user') 来重新验证所有带有 user 标签的数据。这样，下次访问 /user 页面时，Next.js 将会重新获取数据并更新缓存。
使用 revalidatePath 实现基于路径的重新验证
revalidatePath 允许你根据特定的路径来重新验证缓存。例如，当博客文章更新时，你可能需要重新验证博客文章列表页面。
import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';
export async function POST(request) {
// 更新博客文章
// await updateBlogPost(request.body);
revalidatePath('/blog');
return NextResponse.json({ revalidated: true, now: Date.now() });
}在上面的代码中，我们调用 revalidatePath('/blog') 来重新验证 /blog 路径下的所有页面。
注意事项
- use server 指令： 在需要调用 revalidateTag 或 revalidatePath 的地方，通常需要使用 "use server" 指令，尤其是在 Server Actions 中。
- 缓存策略： 了解 Next.js 的缓存策略对于有效地使用按需重新验证至关重要。确保你理解了数据的缓存位置以及何时需要重新验证。
- 错误处理： 在实际应用中，应该添加适当的错误处理机制，以确保重新验证操作能够正常进行。
总结
按需重新验证是 Next.js 13 App Directory 中一项强大的功能，它允许开发者在特定事件发生时，精确地更新页面内容，从而优化性能并提升用户体验。通过 revalidateTag 和 revalidatePath 函数，你可以轻松地实现基于标签或路径的重新验证。理解并合理运用这些函数，可以帮助你构建更加动态和高效的 Next.js 应用程序。
