Next.js静态页面部署Vercel后首次加载未缓存问题排查

核心原因 #

你遇到的问题源于Vercel与本地环境对静态页面的缓存策略差异：

• 本地构建后直接读取静态文件，缓存头为s-maxage=31536000（长期缓存）
• 部署到Vercel后，默认Cache-Control: public, max-age=0, must-revalidate会让边缘节点每次先验证缓存有效性，首次请求无缓存时需从源站拉取内容，导致500ms左右延迟；后续请求会被CDN缓存，加载速度恢复正常。

解决办法 #

1. 强制设置静态页面缓存策略 #

在静态页面的page.js或根layout.js中导出缓存配置，让CDN长期缓存页面：

// 方式1：通过revalidate常量设置缓存时长（单位：秒）
export const revalidate = 31536000; // 缓存一年

// 方式2：自定义更严格的缓存头（推荐）
export async function headers() {
  return [
    {
      source: '/(.*)', // 匹配所有静态页面路径，可按需调整
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, s-maxage=31536000, immutable',
        },
      ],
    },
  ];
}

immutable标记会告知浏览器和CDN资源不会变更，避免不必要的缓存验证请求。

2. 确保页面为纯静态生成 #

检查页面是否包含以下动态逻辑，这类逻辑会让页面从静态生成转为动态渲染，无法被CDN长期缓存：

• 使用usePathname、useSearchParams等客户端动态钩子
• fetch请求未设置cache: 'force-cache'（默认值，但明确设置更稳妥）
• 配置了dynamic = 'force-dynamic'强制动态渲染

若存在上述情况，需调整代码：

• 给动态数据请求添加cache: 'force-cache'
• 将非必要的客户端动态逻辑转移到客户端组件中

3. 预热CDN缓存 #

如果需要首次加载就达到最优速度，可通过以下方式提前缓存内容：

• 手动访问部署后的所有静态页面，触发CDN缓存
• 用自动化脚本（如GitHub Actions）在部署完成后自动请求页面，提前将内容缓存到CDN节点

验证配置效果 #

部署后通过浏览器开发者工具的「网络」面板，查看页面的Cache-Control响应头，确认是否已设置为预期的public, s-maxage=31536000, immutable。

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