NextJS 数据重新验证

revalidatePath 和 revalidateTag 是NextJS新的功能，用于控制页面或数据的重新验证（revalidation），以确保内容的最新和同步。它们主要用于在获取和更新数据时自动刷新页面或部分页面内容。

revalidatePath

作用

revalidatePath 用于重新验证特定路径的页面。这意味着当数据发生变化时，你可以指定某个路径（页面）重新获取数据并刷新内容。

应用场景

1. 表单提交后刷新页面：当用户提交表单并更新数据后，你希望相关页面重新获取最新数据并刷新。
2. 后台管理系统：在内容管理系统中，当管理员更新某个资源时，刷新显示该资源的页面。

示例代码

import { revalidatePath } from 'next/cache';
 
async function updateData(id, newData) {
  // 更新数据
  await fetch(`/api/update/${id}`, {
    method: 'POST',
    body: JSON.stringify(newData),
    headers: {
      'Content-Type': 'application/json'
    }
  });
 
  // 重新验证路径
  revalidatePath(`/data/${id}`);
}

revalidateTag

作用

revalidateTag 用于重新验证具有特定标签的所有路径。这对于管理多个页面的数据依赖非常有用。

应用场景

1. 全局数据更新：当某个全局设置或数据源发生变化时，需要刷新所有使用该数据的页面。
2. 多页面依赖同一数据：在电子商务网站中，如果库存信息更新，所有显示该产品信息的页面都需要刷新。

示例代码

import { revalidateTag } from 'next/cache';
 
async function updateInventory(productId, newInventory) {
  // 更新库存数据
  await fetch(`/api/updateInventory/${productId}`, {
    method: 'POST',
    body: JSON.stringify(newInventory),
    headers: {
      'Content-Type': 'application/json'
    }
  });
 
  // 重新验证带有 'inventory' 标签的所有路径
  revalidateTag('inventory');
}

详细使用场景和示例

revalidatePath 示例

在一个博客应用中，当管理员发布新文章或编辑现有文章后，你希望博客主页和文章详情页都能展示最新的内容。

// app/actions.js
import { revalidatePath } from 'next/cache';
 
export async function publishArticle(articleId, articleData) {
  // 发布文章
  await fetch(`/api/articles/${articleId}`, {
    method: 'POST',
    body: JSON.stringify(articleData),
    headers: {
      'Content-Type': 'application/json'
    }
  });
 
  // 重新验证文章详情页和主页
  revalidatePath(`/articles/${articleId}`);
  revalidatePath(`/`);
}

revalidateTag 示例

在一个电商网站中，如果管理员更新了某个产品的库存信息，你希望所有展示该产品信息的页面都能刷新。

// app/actions.js
import { revalidateTag } from 'next/cache';
 
export async function updateProductStock(productId, stockData) {
  // 更新产品库存信息
  await fetch(`/api/products/${productId}/stock`, {
    method: 'POST',
    body: JSON.stringify(stockData),
    headers: {
      'Content-Type': 'application/json'
    }
  });
 
  // 重新验证所有带有 'product-[productId]' 标签的路径
  revalidateTag(`product-${productId}`);
}

总结

• revalidatePath：用于在特定路径的数据更新后重新验证和刷新该路径的页面。适用于页面级别的刷新。
• revalidateTag：用于重新验证具有特定标签的所有路径，适用于需要同时刷新多个相关页面的场景。

这两种方法结合使用，可以在 Next.js 应用中实现高效的数据更新和页面刷新，确保用户始终看到最新的数据。