Next.js 12使用getServerSideProps时内容需重部署才更新的方案咨询

核心原因 #

生产环境中，Vercel、Netlify这类平台会默认缓存getServerSideProps的响应结果，导致新的CMS内容无法实时获取；而本地开发环境无此缓存策略，因此能正常更新内容。

针对你的思路逐一解答 #

1. 配置Cache-Control响应头（优先推荐） #

这个方案完全可行，通过设置缓存策略，让CDN/边缘节点在缓存过期前返回旧内容，同时后台异步拉取最新数据更新缓存。修改你的getServerSideProps代码如下：

export async function getServerSideProps({ res }) {
  const allArticles = await getAllArticles();

  // 设置缓存规则：缓存10秒，过期后可返回旧内容59秒，同时后台刷新最新数据
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );

  return {
    props: {
      allArticles
    },
  };
}

• s-maxage=10：告知CDN缓存响应10秒
• stale-while-revalidate=59：缓存过期后，允许继续返回旧内容最多59秒，同时服务器后台异步获取最新数据更新缓存

2. 切换到getStaticProps+revalidate（增量静态再生） #

如果你的CMS内容不需要实时更新（更新频率在分钟/小时级），这个方案性能更优——静态页面生成比服务器渲染的资源消耗更低。修改代码示例：

export async function getStaticProps() {
  const allArticles = await getAllArticles();

  return {
    props: {
      allArticles
    },
    // 每60秒后台重新生成页面（可根据更新频率调整数值）
    revalidate: 60,
  };
}

当有新请求进来时，若距离上次页面生成超过60秒，Next.js会在后台静默重新生成页面，用户仍能看到旧页面，直到新页面生成完成。

3. 是否需要第三方库？ #

不需要。Next.js内置的缓存策略和增量静态再生功能已经完全覆盖这类场景，引入第三方库只会增加不必要的复杂度。

4. 你提到的文章是否相关？ #

该文章聚焦于主动触发getServerSideProps内容刷新的场景，比如客户端主动拉取最新数据、通过API路由触发页面重新验证等，和你的问题高度相关。比如需要用户不刷新页面就能看到最新内容，或者通过CMS的webhook主动触发页面更新时，文章中的方法会适用。

额外补充 #

如果需求是实时同步CMS内容（更新后立即显示），可以结合客户端数据获取方案：比如在组件内用SWR或React Query定期拉取最新数据；或者配置CMS的webhook事件，触发Next.js的revalidate API主动更新对应页面。

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