Next.js getStaticProps(fallback:true)在Safari下的缓存异常问题求助

问题详情 #

在getStaticProps设置fallback: true的场景下，Safari（macOS Ventura/iOS 16.3）出现缓存失效问题：

• Chrome表现正常：预取URL首次请求返回200，后续请求返回304（命中缓存）
• Safari异常：所有预取请求始终返回200，完全不触发缓存，点击链接还要重新加载
  本地测试也能复现这个问题，已经卡了一周。

排查&解决建议 #

1. 对比Chrome和Safari的缓存响应头
   打开浏览器开发者工具的网络面板，对比两种浏览器下请求的响应头，重点看Cache-Control、ETag、Last-Modified这些字段。Safari对缓存头的规则比Chrome更严格，可能存在字段解读差异，比如s-maxage的生效逻辑。

2. 手动指定缓存头规则
   在getStaticProps里手动设置明确的缓存策略，强制Safari识别缓存规则，比如：

   export async function getStaticProps() {
     // 你的数据获取逻辑
     return {
       props: { /* 页面所需数据 */ },
       revalidate: 86400,
       headers: {
         'Cache-Control': 'public, s-maxage=86400, stale-while-revalidate=43200',
       },
     };
   }
   

   同时确认Next.js生成的ETag在Safari请求中是否被携带If-None-Match头，这是触发304的关键。

3. 排查自定义逻辑干扰
   去掉页面里的第三方库、自定义请求拦截器等代码，只保留最基础的getStaticProps+fallback: true配置测试，看是不是额外逻辑修改了缓存行为。

4. 检查Next.js版本
   看看当前用的Next.js版本有没有已知的Safari缓存bug，尝试升级到最新稳定版，或者回退到之前没问题的版本试试。

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