Next.js13按需重新验证全解析

本文深入解析 Next.js 13 App Directory 中按需重新验证（On-Demand Revalidation）的实现与应用。通过 `revalidateTag` 和 `revalidatePath` 函数，开发者可精准控制页面缓存更新，无需定期重建整个站点，显著提升性能和用户体验。文章通过示例代码详细演示了如何为数据请求添加标签、如何在表单提交或 Webhook 触发时使用 `revalidateTag` 重新验证缓存，以及如何利用 `revalidatePath` 重新验证特定路径下的所有页面。同时，本文还强调了使用 "use server" 指令、错误处理、缓存策略和 API 路由部署等关键注意事项，助你全面掌握 Next.js 13 的按需重新验证功能，构建更高效的 Web 应用。

本文档旨在指导开发者如何在 Next.js 13 的 App Directory 中实现按需重新验证（On-Demand Revalidation）。通过 `revalidateTag` 和 `revalidatePath`，开发者可以精确控制页面缓存的更新时机，无需定期重建整个站点，从而优化性能和用户体验。我们将通过示例代码演示如何使用这些功能，并提供注意事项，帮助你更好地理解和应用按需重新验证。

Next.js 13 App Directory 中的按需重新验证

在 Next.js 13 的 App Directory 中，按需重新验证（On-Demand Revalidation）允许开发者根据特定事件（例如，Webhook 触发）来更新缓存的页面，而不是依赖于固定的时间间隔。这提供了更细粒度的控制，避免了不必要的重建，提高了应用程序的性能。Next.js 提供了 revalidateTag 和 revalidatePath 两个函数来实现这一功能。

使用 revalidateTag

revalidateTag 允许你根据标签（Tag）来重新验证缓存。首先，在获取数据时，为请求添加一个标签：

export default async function Page() {
  const user = await fetch("/api/user", { next: { tags: ["user"] } })
  const userData = await user.json();
  return <div>我是 {userData.name}, 我的页面很漂亮</div>
}

在这个例子中，我们使用 tags: ["user"] 为 /api/user 请求添加了一个名为 user 的标签。

然后，在需要触发重新验证的地方（例如，在处理表单提交或接收到 Webhook 时），使用 revalidateTag 函数：

import { revalidateTag } from 'next/cache'

export default async function FormPage() {
  const addUser = async (formData) => {
    "use server";
    const name = formData.get('name');
    await fetch("/api/user/update", {
        method: 'POST',
        body: JSON.stringify({name})
    });
    revalidateTag("user") // 触发重新验证
  };

  return(
    <>
      <form action={addUser}>
        &lt;input type=&quot;text&quot; name=&quot;name&quot; /&gt;
        <button type="submit">更新用户</button>
      </form>

      <div>{/* up to date user data */}</div>
    </>
  );
}

在这个例子中，当表单提交并成功更新用户信息后，revalidateTag("user") 会触发所有带有 user 标签的缓存重新验证。注意，addUser 函数需要标记为 "use server"，才能在服务器端运行。

使用 revalidatePath

revalidatePath 允许你根据路径来重新验证缓存。 这在需要重新验证整个路径下的所有页面时非常有用。

import { revalidatePath } from 'next/cache'

async function updateData() {
  // ... 更新数据的逻辑
  revalidatePath('/blog') // 重新验证 /blog 路径下的所有页面
}

在这个例子中，revalidatePath('/blog') 会触发 /blog 路径下的所有缓存页面重新验证。

注意事项

• "use server" 指令: 在服务器组件中使用 revalidateTag 或 revalidatePath 时，必须确保函数使用了 "use server" 指令。
• 错误处理: 在实际应用中，应该添加适当的错误处理机制，以确保重新验证操作在出现问题时不会导致应用程序崩溃。
• 缓存策略: 了解 Next.js 的缓存策略对于正确使用按需重新验证至关重要。 默认情况下，Next.js 会缓存路由和数据。
• API 路由: 使用 revalidateTag 和 revalidatePath 的 API 路由需要部署为 Edge Functions 或 Node.js 函数，以便在服务器端执行。

总结

按需重新验证是 Next.js 13 App Directory 中一个强大的功能，它允许开发者更精确地控制页面缓存的更新，从而优化应用程序的性能和用户体验。通过 revalidateTag 和 revalidatePath，开发者可以根据特定事件触发缓存更新，避免不必要的重建。正确理解和使用这些功能，可以构建更高效、更灵活的 Next.js 应用程序。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~