Next.js 13 App Directory 中的按需重新验证-js教程-PHP中文网

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

聖光之護

发布： 2025-10-11 11:24:07

原创

155人浏览过

next.js 13 app directory 中的按需重新验证

本文旨在讲解如何在 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 <div>我是 {user.name}，我的页面真漂亮</div>;
}

登录后复制

在这个例子中，我们使用 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 (
    <>
      <form action={updateUser}>
        <input type="text" name="name" />
        <button type="submit">更新用户名</button>
      </form>

      <div>{/* 最新的用户数据将在这里显示 */}</div>
    </>
  );
}

登录后复制

在这个例子中，我们创建了一个名为 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）重新生成，从而显示最新的博客文章内容。

关键点：