部署在Azure静态Web应用的React前端刷新后异常求助

可能的原因 #

• 边缘节点缓存不一致
  Azure Static Web App依托CDN边缘节点提供服务，不同环境可能分配到不同节点集群。部分节点若缓存了旧版本的静态资源（如JS bundle），刷新时会加载新旧混合的资源，导致React组件逻辑冲突，触发重复渲染。
• 构建资源哈希差异
  尽管代码分支相同，但Azure Pipelines的构建环境（如代理节点的Node版本、依赖安装细节）可能存在细微差异，导致生成的JS/CSS资源哈希值不一致。问题环境的资源哈希未正确更新，浏览器刷新时加载了缓存的旧资源，与当前页面结构不兼容，引发无限渲染循环。
• 路由缓存与客户端路由冲突
  若使用React Router客户端路由，部分环境的Azure Static Web App路由 fallback 配置（指向index.html）可能因缓存未生效。刷新时浏览器直接请求子路由对应的静态资源，返回旧缓存的index.html，导致React初始化时状态不一致，触发重复渲染。
• 环境变量配置差异
  两个环境的Azure Static Web App可能注入了不同的环境变量（如API地址、功能开关）。某个环境的变量值可能导致组件初始化时反复触发状态更新（比如API地址错误引发请求重试），进而触发无限渲染。

排查建议 #

• 对比两个环境的静态资源哈希：打开浏览器开发者工具的Network面板，查看JS/CSS文件的文件名哈希是否一致。若不一致，需检查Azure Pipelines的构建环境，确保Node版本、依赖锁文件（package-lock.json/yarn.lock）在两个环境中完全一致。
• 强制刷新问题环境页面：使用Ctrl+F5强制刷新，若页面恢复正常，说明是浏览器缓存旧资源导致的问题。需确认构建流程是否正确为资源添加哈希后缀，确保新版本资源能覆盖旧缓存。
• 核对环境变量配置：在Azure Portal中查看两个Static Web App的应用设置，确保所有环境变量完全一致，重点检查影响组件状态的配置项（如API端点）。
• 检查CDN缓存策略：尽管基础托管配置一致，仍需确认两个环境的CDN缓存规则是否相同，避免某环境的静态资源缓存时间过长。
• 启用非压缩错误提示：在问题环境的构建配置中关闭代码压缩，部署后刷新页面，查看完整的错误栈信息，定位到具体触发无限渲染的组件和代码逻辑。

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