本文旨在讲解如何在 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.jsexport default async function Page() { const user = await fetch("/api/user", { next: { tags: ["user"] } }) .then(res => res.json()); return 我是 {user.name}，我的页面真漂亮;}
在这个例子中，我们使用 fetch 函数获取用户数据，并使用 next: { tags: [“user”] } 为该请求添加了一个名为 “user” 的标签。这意味着 Next.js 会将这个请求的结果与 “user” 标签关联起来。
接下来，我们需要一个触发重新验证的函数。这通常会在数据更新时被调用，例如在用户资料更新后：
// app/form/page.jsimport { 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 ( {/* 最新的用户数据将在这里显示 */} 在这个例子中，我们创建了一个名为 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.jsimport { 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 中的按需重新验证的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528533.html
微信扫一扫 
支付宝扫一扫 
