Next.js中getInitialProps()设置Cache-Control头部被覆盖问题求助

这个问题我之前也碰到过！Next.js确实会默认给服务端渲染的页面加上no-store, must-revalidate的Cache-Control头，目的是防止页面被意外缓存，导致用户看到旧内容。你的自定义My-Header能生效，但Cache-Control被覆盖，是因为Next.js的默认缓存策略优先级更高。

下面给你两种靠谱的解决思路：

1. 用getServerSideProps替代getInitialProps（推荐） #

从Next.js 9.3版本开始，官方更推荐使用getServerSideProps来处理服务端渲染的数据逻辑，它不会覆盖你设置的Cache-Control头。直接把你的逻辑迁移过去就行：

export async function getServerSideProps(context) {
  if (context.res) {
    // 这里设置你的自定义缓存策略，比如public缓存1小时，CDN缓存1天
    context.res.setHeader('Cache-Control', 'public, max-age=3600, s-maxage=86400');
    context.res.setHeader('My-Header', 'My-Value');
  }
  
  return { props: {} };
}

注意：s-maxage是给CDN或反向代理服务器用的缓存时长，max-age是给客户端浏览器用的，你可以根据实际需求调整数值。

2. 保留getInitialProps的情况下，通过next.config.js配置全局/页面级缓存头 #

如果你的项目还在依赖getInitialProps不想迁移，可以在next.config.js中通过headers配置来强制覆盖默认的Cache-Control：

module.exports = {
  async headers() {
    return [
      {
        // 匹配你需要设置缓存的页面路径，比如根路径或者特定页面
        source: '/your-target-page',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=3600, s-maxage=86400',
          },
        ],
      },
    ];
  },
};

这种方式是在Next.js的响应流程最外层设置头，优先级会高于默认的缓存策略，所以不会被覆盖。

另外要注意：如果你的页面是静态生成（用getStaticProps），缓存逻辑又不一样——静态页面默认会有强缓存，不需要额外设置；但你的场景是服务端渲染，所以上面两种方法都适用。

内容的提问来源于stack exchange，提问作者Cyril Sadasivan Panicker