静态Gatsby网站疑似缓存问题排查求助

1. 客户端缓存验证 #

• 检查浏览器本地缓存：打开浏览器开发者工具（F12）的网络面板，勾选「禁用缓存」后刷新页面，确认是否加载最新内容。若此时正常，说明是客户端浏览器缓存导致，需为静态资源配置合理的缓存控制头。
• 配置Blob存储缓存策略：Gatsby生成的带哈希后缀的静态资源（如js、css、图片），可设置Cache-Control: public, max-age=31536000, immutable；而index.html等入口文件必须设置Cache-Control: public, max-age=0, must-revalidate，避免浏览器长期缓存旧入口。

2. Azure CDN缓存刷新与规则检查 #

• 确认CDN刷新范围：手动触发一次CDN全局刷新（或刷新/*路径），验证是否覆盖所有相关文件。排查是否存在仅刷新特定资源、遗漏index.html或路由对应文件的情况。
• 检查CDN缓存规则优先级：确保Azure CDN遵循Blob存储的Cache-Control头设置，避免CDN自身规则强制缓存入口文件。若配置了自定义缓存规则，需确认规则逻辑不会阻止最新内容的分发。

3. Gatsby构建与部署完整性校验 #

• 验证Blob存储构建产物：Sanity触发构建后，检查Blob存储中public目录的文件修改时间与内容哈希，确认index.html及各路由对应的html文件已被最新构建产物完全覆盖。
• 排查Azure Function执行日志：查看Function的运行日志，确认是否完整执行了Gatsby构建、Blob上传流程。重点检查是否存在构建失败、上传中断、Blob存储写入权限不足等问题。

4. Sanity内容同步与触发逻辑检查 #

• 确认Sanity Webhook有效性：检查Sanity Webhook是否仅在内容发布后触发（而非草稿状态），并验证Webhook请求已成功到达Azure Function，未被防火墙或网络策略拦截。
• 校验Gatsby数据源拉取：查看Gatsby构建日志，确认构建过程中已从Sanity API拉取到最新内容，避免因数据源同步延迟导致生成旧静态文件。

5. 路由与静态资源映射排查 #

• 清理客户端路由缓存：若使用Gatsby客户端路由，尝试清除浏览器的SessionStorage和LocalStorage后重新测试，排除旧路由缓存导致的页面加载异常。
• 验证静态资源哈希引用：检查页面中引用的js、css文件路径是否包含最新哈希值。若引用的是旧哈希路径，说明构建过程未正确生成新的资源映射，需排查Gatsby构建配置。

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