Sanity v3+Next.js v13本地修改后页面未更新问题求助

这确实是缓存问题，涉及Next.js的数据获取缓存和Sanity客户端的默认缓存策略，以下是具体解决步骤：

1. 关闭Next.js的数据获取缓存 #

Next.js 13的App Router默认会对Server Components中的数据请求做缓存，导致页面不会主动重新拉取新数据。你可以通过两种方式解决：

方式一：在页面组件中设置实时重新验证 #

在渲染项目列表的页面文件（比如app/projects/page.tsx）顶部添加：

export const revalidate = 0; // 0表示禁用缓存，每次请求都重新获取数据

方式二：在Sanity请求中指定缓存策略 #

修改getProjects函数，在fetch方法中添加cache选项：

export async function getProjects(): Promise<Project[]> {
  return createClient(clientConfig).fetch(
    groq`*[_type=="project"]|order(_createdAt desc){
    _id,
    _createdAt,
    name,
    "slug": slug.current,
    "image": image.asset->url,
    url,
    content
  }`,
    {}, // 查询参数（这里为空）
    { cache: 'no-store' } // 禁用缓存
  );
}

2. 优化Sanity客户端配置 #

你的当前配置存在两个问题：

• API版本用了过时的v1，Sanity建议使用日期格式的版本号（比如当前最新的2024-05-01）
• 未设置useCdn，开发环境下应该关闭CDN缓存，避免获取旧数据

修改后的clientConfig：

const config = {
  projectId: "xxxxxx",
  dataset: "production",
  apiVersion: "2024-05-01", // 使用日期格式的最新API版本
  useCdn: process.env.NODE_ENV === "production", // 生产环境用CDN，开发环境禁用
};

export default config;

完成以上修改后，在Sanity Studio中更新或新增project文档，刷新本地Next.js页面就能看到实时变化了。

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