revalidatePath

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

值得注意的是：

revalidatePath 在 Node.js 和 Edge 运行时中都可用。

revalidatePath 只在下次访问指定路径时才会使缓存失效。这意味着对动态路由段调用 revalidatePath 不会立即触发多次重新验证。重新验证只会在下次访问该路径时发生。

目前，revalidatePath 会使客户端路由缓存中的所有路由失效。这种行为是暂时的，未来将更新为只应用于特定路径。

使用 revalidatePath 仅会使服务器端路由缓存中的特定路径失效。

参数

revalidatePath(path: string, type?: 'page' | 'layout'): void;

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

返回值

revalidatePath 不返回值。

示例

重新验证特定 URL

import { revalidatePath } from "next/cache";
revalidatePath("/blog/post-1");

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

重新验证页面路径

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

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

重新验证布局路径

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

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

重新验证所有数据

import { revalidatePath } from "next/cache";
 
revalidatePath("/", "layout");

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

服务器操作

app/actions.ts

"use server";
 
import { revalidatePath } from "next/cache";
 
export default async function submit() {
  await submitForm();
  revalidatePath("/");
}

路由处理程序

app/api/revalidate/route.ts

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",
  });
}

app/api/revalidate/route.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",
  });
}