Coding Hao

每天一个Next.js知识点之revalidatePath函数

2024年2月15日 (1年前)

介绍

在 Next.js 中，revalidatePath 是一个用于重新验证特定路径的函数，通常与 Incremental Static Regeneration (ISR) 或 Server Actions 结合使用。它的作用是强制刷新指定路径的缓存数据，确保页面内容是最新的。

使用场景

  • 当你更新了某些数据（例如数据库或 CMS 的内容），并希望立即刷新页面的静态生成内容。
  • 在 Server Actions 或 API 路由中，手动触发特定路径的重新验证。

使用方法

在 Server Actions 中使用

Server Actions 是 Next.js 13 引入的功能，允许在服务器端执行操作。你可以在 Server Action 中调用 revalidatePath 来刷新特定路径的缓存。

'use server';

import { revalidatePath } from 'next/cache';
export async function updateData() {
  // 更新数据的逻辑
  await updateDatabase();
  // 重新验证特定路径
  revalidatePath('/blog'); // 刷新 /blog 路径
  revalidatePath('/blog/[slug]'); // 刷新动态路由
}

在 API 路由中使用

如果你在 API 路由中更新了数据，并希望刷新特定路径的缓存，也可以使用 revalidatePath。

import { revalidatePath } from 'next/cache';
export default async function handler(req, res) {
  // 更新数据的逻辑
  await updateDatabase();
  // 重新验证特定路径
  revalidatePath('/blog'); // 刷新 /blog 路径
  revalidatePath('/blog/[slug]'); // 刷新动态路由
  res.status(200).json({ message: 'Data updated and path revalidated' });
}

示例场景

假设你有一个博客网站，用户提交评论后，你希望立即刷新博客文章的页面以显示最新的评论：

// app/actions.js
'use server';

import { revalidatePath } from 'next/cache';

export async function submitComment(postId, comment) {
  // 将评论保存到数据库
  await saveCommentToDatabase(postId, comment);

  // 重新验证博客文章页面
  revalidatePath(`/blog/${postId}`);
}
  • revalidatePath 会重新验证与路径匹配的所有页面。例如，revalidatePath('/blog') 会刷新 /blog 路径下的所有页面,对于动态路由，需要传递完整的路径（如 /blog/[slug]）。
  • revalidatePath 是 Next.js 13 引入的功能，确保你的项目使用的是 Next.js 13 或更高版本。