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