Next.js 13 App Directory 中的按需重新验证教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-11

浏览次数：次

返回列表

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 <div>I am {userData.name}, my page is beautiful</div>;
}

在上面的代码中，我们使用 fetch 从 /api/user 获取用户数据，并为该数据添加了 user 标签。 注意：是 tags 属性，传入一个字符串数组。

接下来，在需要触发重新验证的地方，例如在处理表单提交或 Webhook 请求的 API 路由中，调用 revalidateTag 函数：

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

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 应用程序。

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

# 博客 # 金华营销推广报名电话查询 # 讨债公司网站建设 # 山东网站优化策划 # 正规网站建设活动 # 很好的推广网站有哪些 # 网站建设与实施流程 # 画家广场网站建设费用 # 常州网站专题优化 # 淘宝seo的工作原理 # 丰台工务段网站建设 # 是在 # 加载 # 在特定 # js # 如何实现 # 服务端 # 如何使用 # 在上面 # 表单 # 按需 # 字符串数组 # 表单提交 # 路由 # ai # app # json

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：jQuery教程：如何高效汇总具有特定ID模式的TD标签数值

下一篇：OpenLayers中旋转投影图像失真问题的解决方案

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

使用 revalidateTag 实现基于标签的重新验证

使用 revalidatePath 实现基于路径的重新验证

注意事项

总结