Next.js中Sanity.io内容无法即时更新的问题求助

问题根源 #

• 你开启了useCdn: true，Sanity的CDN会缓存旧数据，所以后台更新后页面仍会读取缓存内容
• 修改API版本能更新数据，是因为Sanity的API版本对应特定时间的内容快照，切换新版本会拉取最新快照，回滚版本则回到旧快照

具体解决步骤 #

1. 开发环境先关闭CDN缓存

直接修改sanity.js里的useCdn配置，根据环境动态开关：

import {createClient} from "next-sanity"

export const client = createClient ({
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    apiVersion:"2021-10-21",
    // 开发环境关CDN确保拿最新数据，生产环境按需开启
    useCdn: process.env.NODE_ENV === "production",
})

2. 用预览模式绕开CDN（开发/预发布环境适用）

如果生产环境需要预览最新内容，给Sanity客户端添加预览模式配置：

// sanity.js 新增预览客户端
export const previewClient = createClient({
  ...client.config(),
  useCdn: false,
  token: process.env.SANITY_API_TOKEN, // 需要在.env文件中配置该token
});

// 写个切换函数，根据预览状态选择对应客户端
export function getClient(preview = false) {
  return preview ? previewClient : client;
}

然后修改getExperience.js使用这个切换后的客户端：

import { getClient } from '../../lib/sanity'

export default async function getExperience(preview = false) {
    const query = `*[_type=="experience"] {
        title,
        jobTitle,
        description,
        startDate,
        endDate,
        _id,
    }`;

    const data = await getClient(preview).fetch(query);
    return data;
}

开启预览模式时会直接拉取Sanity最新数据，不经过CDN缓存。

3. 生产环境开CDN同时保证数据更新

如果生产环境必须使用CDN，可按以下方式配置：

• 将API版本改为最新的日期格式（比如2024-05-20），确保基准快照为最新状态
• 启用Next.js的增量静态再生（ISR），让页面定期重新生成：
  在页面的getStaticProps中添加revalidate参数：

export async function getStaticProps() {
  const experiences = await getExperience();
  return {
    props: { experiences },
    // 每60秒自动重新生成页面，拉取最新数据
    revalidate: 60,
  };
}

也可以配合Sanity的Webhook，在内容更新时主动触发Next.js页面重新生成，实现即时同步。

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