Great question! Let’s break this down clearly so you know exactly what’s going on and how to fix it.

这是框架问题还是平台问题？ #

Short answer: 这主要是Netlify的默认缓存配置导致的，不是Gatsby本身的问题。

Here’s why:

• Gatsby生成的是静态站点，它已经做了正确的缓存优化：所有静态资源（JS、CSS、图片等）的文件名都带有内容哈希（比如main.abc123.js）。这意味着只要内容更新，文件名就会变，浏览器会自动加载新文件，不会被旧缓存卡住。
• 问题出在没有哈希的入口文件（比如index.html）。Netlify默认对这类HTML文件的缓存策略比较宽松，可能让浏览器缓存旧的入口页面，而旧页面里引用的还是旧的资源路径，导致用户看到滞后的版本。

能不能在服务器端设置TTL？ #

绝对可以！你可以通过Netlify的配置文件自定义缓存规则，精准控制不同文件的TTL和缓存行为。

具体配置方法 #

在你的Gatsby项目根目录创建一个netlify.toml文件，添加以下规则：

# 控制入口文件（如index.html）的缓存，强制浏览器每次验证最新版本
[[headers]]
  for = "/*"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

# 对带哈希的静态资源设置长期缓存（文件名变了才会更新）
[[headers]]
  for = "/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

配置说明：

• 第一部分规则针对所有根路径文件（比如index.html）：max-age=0让浏览器不直接用本地缓存，must-revalidate要求每次请求都向Netlify的CDN验证文件是否更新，确保用户拿到最新的入口页面。
• 第二部分针对/static/下的资源：max-age=31536000是一年的缓存时间，加上immutable告诉浏览器这个文件不会变，因为Gatsby会用哈希文件名更新内容，所以可以安全长期缓存，提升加载速度。

额外优化提示 #

• 你也可以在Netlify后台的「Site Settings > Build & deploy > Post processing > Asset optimization」里开启官方的资源优化功能，它会自动帮你处理部分缓存策略，但netlify.toml的配置会优先生效。
• 部署新版本后，Netlify会自动清除CDN层面的缓存，但用户本地浏览器的旧缓存需要通过上面的配置来主动触发更新，不用再让用户手动刷新。

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