revalidatePath 允许您按需使特定路径的缓存数据失效。
revalidatePath 可以在服务器函数和路由处理器中调用。
revalidatePath 不能在客户端组件或代理中调用,因为它仅在服务器环境中工作。
须知:
- 服务器函数: 立即更新用户界面(如果正在查看受影响的路径)。目前,它还会导致所有先前访问过的页面在再次导航时刷新。此行为是暂时的,未来将更新为仅适用于特定路径。
- 路由处理器: 标记路径以进行重新验证。重新验证将在下次访问指定路径时进行。这意味着使用动态路由段调用
revalidatePath不会立即同时触发多次重新验证。失效只在下次访问路径时发生。
revalidatePath(path: string, type?: 'page' | 'layout'): void;path: 可以是与您希望重新验证的数据对应的路由模式,例如 /product/[slug],或一个具体的 URL,/product/123。不要附加 /page 或 /layout,请改用 type 参数。不得超过 1024 个字符。此值区分大小写。type: (可选)'page' 或 'layout' 字符串,用于更改要重新验证的路径类型。如果 path 包含动态段,例如 /product/[slug],则此参数为必填项。如果 path 是一个具体的 URL,/product/1,则省略 type。当您想刷新单个页面时,请使用具体的 URL。使用路由模式加上 type 来刷新多个 URL。
revalidatePath 不返回任何值。
path 参数可以指向页面、布局或路由处理器:
layout.tsx)、其下的所有嵌套布局以及它们下面的所有页面失效revalidatePath("/api/data") 会使此 GET 处理器失效:export async function GET() {
const data = await fetch('https://api.vercel.app/blog', {
cache: 'force-cache',
})
return Response.json(await data.json())
}revalidateTag 和 updateTag 的关系revalidatePath、revalidateTag 和 updateTag 服务于不同的目的:
revalidatePath: 使特定页面或布局路径失效revalidateTag: 将带有特定标签的数据标记为陈旧。适用于所有使用这些标签的页面updateTag: 使带有特定标签的数据过期。适用于所有使用这些标签的页面当您调用 revalidatePath 时,只有指定的路径在下次访问时会获取最新数据。使用相同数据标签的其他页面将继续提供缓存数据,直到这些特定标签也重新验证为止:
// Page A: /blog
const posts = await fetch('https://api.vercel.app/blog', {
next: { tags: ['posts'] },
})
// Page B: /dashboard
const recentPosts = await fetch('https://api.vercel.app/blog?limit=5', {
next: { tags: ['posts'] },
})调用 revalidatePath('/blog') 后:
了解 revalidateTag 和 updateTag 之间的区别。
revalidatePath 和 updateTag 是互补的原语,常在工具函数中一起使用,以确保应用程序中的全面数据一致性:
'use server'
import { revalidatePath, updateTag } from 'next/cache'
export async function updatePost() {
await updatePostInDatabase()
revalidatePath('/blog') // Refresh the blog page
updateTag('posts') // Refresh all pages using 'posts' tag
}这种模式确保特定页面以及使用相同数据的任何其他页面保持一致。
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/post-1')这将使一个特定的 URL 失效,以便在下次页面访问时重新验证。
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// or with route groups
revalidatePath('/(main)/blog/[slug]', 'page')这将使与提供的 page 文件匹配的任何 URL 失效,以便在下次页面访问时重新验证。这不会使特定页面下的页面失效。例如,/blog/[slug] 不会使 /blog/[slug]/[author] 失效。
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// or with route groups
revalidatePath('/(main)/post/[slug]', 'layout')这将使与提供的 layout 文件匹配的任何 URL 失效,以便在下次页面访问时重新验证。这将导致具有相同布局的下级页面在下次访问时失效并重新验证。例如,在上述情况下,/blog/[slug]/[another] 也将在下次访问时失效并重新验证。
import { revalidatePath } from 'next/cache'
revalidatePath('/', 'layout')这将清除客户端路由器缓存,并使数据缓存失效,以便在下次页面访问时重新验证。
'use server'
import { revalidatePath } from 'next/cache'
export default async function submit() {
await submitForm()
revalidatePath('/')
}import { revalidatePath } from 'next/cache'
import type { NextRequest } from 'next/server'
export async function GET(request: NextRequest) {
const path = request.nextUrl.searchParams.get('path')
if (path) {
revalidatePath(path)
return Response.json({ revalidated: true, now: Date.now() })
}
return Response.json({
revalidated: false,
now: Date.now(),
message: 'Missing path to revalidate',
})
}import { revalidatePath } from 'next/cache'
export async function GET(request) {
const path = request.nextUrl.searchParams.get('path')
if (path) {
revalidatePath(path)
return Response.json({ revalidated: true, now: Date.now() })
}
return Response.json({
revalidated: false,
now: Date.now(),
message: 'Missing path to revalidate',
})
}