Next.js按需重验证：Sanity客户端如何添加标签重验证？

因为Sanity的fetch方法不支持直接传入Next.js的next: { tags }配置，且React的cache函数无法添加缓存标签，你需要使用Next.js提供的缓存函数来包裹数据获取逻辑，实现标签式重验证：

步骤1：导入Next.js缓存函数 #

从next/cache中导入对应函数：

// Next.js 13.4-13.5版本
import { unstable_cache } from 'next/cache';

// Next.js 14+ 版本（已稳定）
import { cache } from 'next/cache';

步骤2：重构数据获取函数 #

用Next.js缓存函数包裹Sanity的查询逻辑，同时指定重验证标签：

// sanity/api.ts
import { unstable_cache } from 'next/cache'; // 或根据版本导入cache
import sanity from './sanity-client'; // 导入你的Sanity客户端实例

export const getPosts = unstable_cache(
  async (params?: GetPostsParams): Promise<Post[]> => {
    const { labKey } = params || {};
    const query = `...`; // 你的Sanity GROQ查询语句
    const posts = await sanity.fetch(query);
    return posts;
  },
  ['posts-cache', params?.labKey || 'default'], // 缓存键，可加入动态参数区分不同缓存
  { tags: ['posts'] } // 指定重验证标签
);

注：缓存键数组需为可序列化的静态/动态值，若需根据labKey区分不同缓存实例，可将其加入缓存键数组。

步骤3：实现触发重验证的API路由 #

创建API路由来触发指定标签的缓存重验证：

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST() {
  // 建议添加鉴权逻辑，仅允许授权请求触发重验证
  revalidateTag('posts');
  return NextResponse.json({ revalidated: true, timestamp: Date.now() });
}

调用该API路由后，所有标记为posts的缓存数据会被强制重验证。

内容的提问来源于stack exchange，提问作者Lorik