revalidatePath

revalidatePath 允许您按需使特定路径的缓存数据失效。

用法

revalidatePath 可以在服务器函数和路由处理程序中调用。

revalidatePath 不能在客户端组件或代理中调用，因为它只在服务器环境中工作。

须知:

服务器函数：立即更新 UI（如果正在查看受影响的路径）。目前，它还会导致所有以前访问过的页面在再次导航时刷新。此行为是临时的，将来会更新为仅应用于特定路径。

路由处理程序：将路径标记为重新验证。重新验证在下次访问指定路径时进行。这意味着使用动态路由段调用 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。要刷新多个 URL，请使用路由模式加 type。

revalidatePath 不返回任何值。

可失效的内容

路径参数可以指向页面、布局或路由处理程序

页面：使特定页面失效
布局：使布局（该段的 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') 后

页面 A (/blog)：显示新鲜数据（页面重新渲染）
页面 B (/dashboard)：仍显示过期数据（缓存标签 'posts' 未失效）

了解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
}

此模式确保特定页面和使用相同数据的任何其他页面保持一致。

示例

重新验证特定 URL

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',
  })
}