Skip to content

revalidatePath 允许你按需清除特定路径上的缓存数据

须知

  • revalidatePathNode.js 和 Edge 运行时 中都可用。
  • revalidatePath 仅在包含的路径下次被访问时才使缓存失效。这意味着使用动态路由段调用 revalidatePath 不会立即触发许多重新验证。失效仅在下次访问路径时发生。
  • 目前,revalidatePath 使 客户端 Router 缓存 中的所有路由失效。这种行为是暂时的,将来将更新为仅适用于特定路径。
  • 使用 revalidatePath 仅使 服务器端 Route 缓存 中的特定路径失效。

参数

tsx
revalidatePath(path: string, type?: 'page' | 'layout'): void;
  • path: 表示与要重新验证的数据关联的文件系统路径的字符串(例如,/product/[slug]/page),或字面路由段(例如,/product/123)。必须少于1024个字符。此值区分大小写。
  • type: (可选)'page''layout' 字符串,用于更改要重新验证的路径类型。如果 path 包含动态段(例如,/product/[slug]/page),则需要此参数。如果路径引用字面路由段,例如动态页面(例如,/product/[slug]/page)的 /product/1,则不应提供 type

返回值

revalidatePath 不返回任何值。

例子

重新验证特定URL

ts
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/post-1')

这将在下一次页面访问时重新验证一个特定的URL。

重新验证页面路径

ts
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// 或者使用路由组
revalidatePath('/(main)/post/[slug]', 'page')

这将在下一次页面访问时重新验证匹配提供的page文件的任何URL。这将不会使特定页面下的页面失效。例如,/blog/[slug]不会使/blog/[slug]/[author]失效。

重新验证布局路径

ts
import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// 或者使用路由组
revalidatePath('/(main)/post/[slug]', 'layout')

这将在下一次页面访问时重新验证匹配提供的layout文件的任何URL。这将导致具有相同布局的页面在下一次访问时重新验证。例如,在上述情况下,/blog/[slug]/[another]也将在下一次访问时重新验证。

重新验证所有数据

ts
import { revalidatePath } from 'next/cache'

revalidatePath('/', 'layout')

这将清除客户端路由器缓存,并在下一次页面访问时重新验证数据缓存。

服务器操作

ts
'use server'

import { revalidatePath } from 'next/cache'

export default async function submit() {
  await submitForm()
  revalidatePath('/')
}

路由处理器

ts
import { revalidatePath } from 'next/cache'
import { 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',
  })
}
js
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',
  })
}