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

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）重新生成，从而显示最新的用户数据。

Facetune

一款在线照片和视频编辑工具，允许用户创建AI头像

109 查看详情 Facetune

关键点：

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 应用程序，满足各种实时数据更新的需求。

以上就是Next.js 13 App Directory 中的按需重新验证的详细内容，更多请关注其它相关文章！

# json # 宁波seo优化化 # 秦皇岛石家庄网站建设 # 天津网站拓客推广公司 # seo原创文章怎么创作 # 营销推广成本计算 # 番禺抖音seo优化文案 # 我是 # 是一个 # 应用程序 # 这将 # 博客 # 鼠标 # 表单 # 适用于 # 在这个 # 按需 # 表单提交 # 路由 # ai # app # js # 顺德页面seo优化代理 # 戏曲网站建设北路小学 # 旅行社营销推广案例范文 # 广告推广营销的文献综述

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-11

4008744355

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

使用 revalidateTag 进行数据标签重新验证

使用 revalidatePath 进行路径重新验证

注意事项和总结

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice