如何阻止Next.js静态生成场景下引用本地JSON文件的页面被缓存

• 你配置的revalidate参数属于Next.js增量静态再生（ISR）能力，该能力仅在支持Node.js运行时的托管平台生效，cpanel这类传统静态托管仅能托管纯静态资源，无法运行ISR的后台更新逻辑，所以修改JSON后不会自动触发页面重新生成。
• 你当前的缓存规则只覆盖了js、html、htm文件，漏掉了getStaticProps拉取的JSON文件本身的缓存，浏览器会缓存旧的JSON内容，哪怕页面没有被缓存，拉取到的仍然是旧版本的JSON数据。

方案1：调整数据拉取逻辑为客户端请求 #

• 移除getStaticProps中读取本地JSON的逻辑，改为页面在客户端侧用fetch请求站点内的JSON文件，同时给JSON配置不缓存的响应头。
• 在你现有的.htaccess中新增JSON文件的缓存规则：

<FilesMatch "\.(json)$">
  Header set Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"
  Header set Pragma "no-cache"
  Header set Expires "0"
</FilesMatch>

• 拉取JSON时可额外添加时间戳参数避免缓存：fetch('/data/your-data.json?t=' + Date.now())

方案2：更新JSON后全量重新构建导出 #

• 每次修改JSON内容后，重新执行next build && next export命令构建全量静态资源，将新生成的out目录下的所有文件上传到cpanel覆盖旧资源即可，该方案无需修改业务代码，适合内容更新频率低的场景。

方案3：优化全站缓存规则 #

• Next.js静态导出的js、css等资源自带内容哈希，可给这类资源设置长期缓存，仅给HTML、JSON设置不缓存，兼顾访问速度和内容更新的时效性，参考.htaccess配置：

# 带哈希的静态资源设置长期缓存
<FilesMatch "\.(js|css|png|jpg|jpeg|svg|woff|woff2)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# HTML和JSON文件强制不缓存
<FilesMatch "\.(html|htm|json)$">
  Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
</FilesMatch>

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