本文详细介绍了如何在 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 I am {userData.name}, my page is beautiful;}
在上面的代码中，我们使用 fetch 从 /api/user 获取用户数据，并为该数据添加了 user 标签。 注意：是 tags 属性，传入一个字符串数组。
接下来，在需要触发重新验证的地方，例如在处理表单提交或 Webhook 请求的 API 路由中，调用 revalidateTag 函数：
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 中的按需重新验证教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528489.html
微信扫一扫 
支付宝扫一扫 
