Nextjs使用getServerSideProps数据更新需重构建才生效问题咨询

更新数据后必须重构建才能看到新内容的问题，本质是多层缓存拦截了请求，没有真正执行每次请求拉取最新数据的逻辑，和getServerSideProps本身的设计预期无关：

• 代码中使用的Apollo Client查询默认开启缓存，若SSR阶段复用了单例Client实例，会直接读取内存中的旧缓存数据，不会发请求到数据库
• Next.js本身、部署平台的边缘节点、CDN默认会缓存SSR响应，未配置正确缓存头时，后续请求会直接返回第一次生成的静态内容，不会重新执行getServerSideProps逻辑
• 若页面同时配置了静态生成相关方法，Next会优先走静态构建逻辑，完全忽略getServerSideProps

按优先级依次排查调整即可：

• 禁用Apollo Client的SSR查询缓存
  给查询逻辑添加fetchPolicy: 'no-cache'配置，强制每次查询直接请求数据源，不读取本地缓存：

export const getServerSideProps = async ({ params }) => {
  const { data: professionalData } = await client.query({
    query: GET_PROFESSIONAL,
    variables: {
      uuid: params.uuid,
    },
    fetchPolicy: 'no-cache', // 新增该行，禁用查询缓存
  });

  return {
    props: {
      data: professionalData.user,
    },
  };
};

注意SSR场景不要全局复用带持久缓存的Apollo Client实例，避免跨请求的缓存污染。

• 配置正确的响应头，禁用各层级静态缓存
  在getServerSideProps中手动设置Cache-Control头，告诉Next服务、边缘节点、CDN、浏览器不要缓存该页面的响应，每次请求都重新执行渲染逻辑：

export const getServerSideProps = async ({ params, res }) => {
  // 新增缓存头配置，所有层级不缓存响应
  res.setHeader(
    'Cache-Control',
    'no-store, private, no-cache, must-revalidate'
  );
  const { data: professionalData } = await client.query({
    query: GET_PROFESSIONAL,
    variables: {
      uuid: params.uuid,
    },
    fetchPolicy: 'no-cache',
  });

  return {
    props: {
      data: professionalData.user,
    },
  };
};

如果需要平衡性能和数据新鲜度，可以不用完全禁用缓存，改用短周期增量缓存策略，比如设置s-maxage=10, stale-while-revalidate=60，即可实现最多10秒的数据延迟，同时大幅降低数据库压力。

• 排查静态生成冲突配置
  检查页面文件中是否同时导出了getStaticProps或getStaticPaths，若存在这两个方法，Next会优先在构建时生成静态页面，不会在请求阶段执行getServerSideProps，删除相关静态生成配置即可。
  同时检查next.config.js中是否给/blog/*路径配置了静态导出、强制缓存规则，若有则调整为动态路由规则。

可以在getServerSideProps中添加日志打印当前时间、查询返回的图片数量，部署后访问页面查看服务端日志：

• 若访问页面时没有新的日志输出，说明请求被CDN/边缘缓存拦截，没有走到SSR执行逻辑
• 若有日志输出但返回的图片数量还是旧值，说明是Apollo客户端、数据库层面的查询缓存问题，优先检查数据源配置

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