Gatsby项目部署Netlify后产品详情页加载成功后自动隐藏问题求助

1 运行时错误排查 #

• 首先打开浏览器控制台查看Console面板报错，优先确认是否存在hydration不匹配错误：
  这类错误是Gatsby SSR/SSG项目最容易触发页面加载后消失、交互失效的原因，通常是组件内直接调用window、document等浏览器专属API没有加非空判断，或者服务端、客户端渲染生成的DOM结构不一致导致。如果确认是该类错误，给调用浏览器API的逻辑加typeof window !== 'undefined'判断，或者给问题组件做客户端懒加载即可解决。
• 其次确认是否存在混合内容拦截报错：
  你当前的Netlify站点是HTTPS协议，而部署在EC2的Strapi后端是HTTP协议，浏览器默认会拦截HTTPS站点发起的HTTP请求，会导致前端请求后端数据失败，触发后续逻辑异常。可以通过给Strapi配置SSL证书改用HTTPS协议解决该问题。

2 路由配置排查 #

• 检查项目根目录下的_redirects文件是否配置了客户端路由回退规则，动态路由场景下需要添加/* /index.html 200规则，否则页面刷新或者直接访问动态路由地址会出现资源加载异常。
• 确认gatsby-config.js中的pathPrefix配置是否符合Netlify部署的路径规则，无特殊子路径部署需求不要随意配置该参数。

3 样式与条件渲染逻辑排查 #

• 打开浏览器元素面板查看被隐藏的内容节点，确认是否被添加了隐藏样式，追溯样式来源：如果是条件渲染逻辑触发的隐藏，检查后端数据请求返回后的状态判断逻辑是否正确；如果是类名冲突导致的样式覆盖，改用CSS Modules等方案隔离组件样式即可。

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