Next.js 13（App目录）与Sanity内容不更新，需重新部署如何解决？

问题原因 #

Next.js App目录的服务端组件默认采用静态生成（Static Generation），构建阶段会将Sanity的数据缓存下来，后续用户请求直接复用缓存内容。因此在Sanity Studio修改内容后，刷新页面依然显示旧数据，只有重新部署Vercel才会重新生成静态内容。

解决方案 #

1. 配置缓存失效策略（快速生效）

在服务端组件中通过revalidate字段控制缓存有效期，让Next.js定期或实时重新获取Sanity数据：

• 实时获取（禁用缓存）：

export const revalidate = 0; // 每次请求都重新拉取数据

const Page = async () => {
  const query = groq`*[_type == "university"]`;
  const data = await sanityClient.fetch(query);
  
  return (
    <div>
      {/* 渲染你的数据内容 */}
    </div>
  );
};

export default Page;

• 定时刷新缓存：比如设置每60秒更新一次，将revalidate值改为60即可，适合不需要严格实时的场景。

如果你的Sanity请求是通过原生fetch发起的，也可以直接在请求配置中指定缓存策略：

const Page = async () => {
  const query = groq`*[_type == "university"]`;
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_SANITY_API_URL}/v1/data/query/${process.env.NEXT_PUBLIC_SANITY_DATASET}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.SANITY_API_TOKEN}`
      },
      body: JSON.stringify({ query }),
      next: { revalidate: 0 } // 此处设置缓存规则
    }
  );
  const data = await res.json();

  return (
    <div>
      {/* 渲染你的数据内容 */}
    </div>
  );
};

2. 用Sanity Webhook触发增量静态再生（高效更新）

配置Webhook让Sanity内容修改时自动通知Vercel更新对应页面的缓存：

• 先在Vercel项目的「Settings > Git > Deploy Hooks」中创建一个部署钩子，复制生成的URL；
• 登录Sanity Studio，进入「Settings > API > Webhooks」，新建Webhook：
  • 粘贴刚才的Vercel Deploy Hook URL；
  • 触发条件选择「Create」「Update」「Delete」，并指定目标数据类型（比如university）；
  • 保存后，每次修改Sanity内容都会自动触发Vercel更新对应页面的静态缓存，用户刷新即可看到新数据。

3. 客户端实时获取数据（完全实时）

如果需要极致的实时体验，可改用客户端组件结合数据请求库（如SWR）获取数据，每次页面刷新都会重新请求Sanity：

'use client';
import useSWR from 'swr';
import { sanityClient } from '../lib/sanity';

const UniversityPage = () => {
  const fetcher = async () => {
    const query = groq`*[_type == "university"]`;
    return sanityClient.fetch(query);
  };

  const { data, error } = useSWR('university-list', fetcher);

  if (error) return <div>数据加载失败</div>;
  if (!data) return <div>加载中...</div>;

  return (
    <div>
      {/* 渲染数据列表 */}
    </div>
  );
};

export default UniversityPage;

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