Next.js 13 App Directory 中的按需重新验证教程_技术教程

本文详细介绍了如何在 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 应用程序。