Gatsby站点用Helmet引入第三方脚本 首次请求不生效刷新才加载

• Gatsby基于React实现客户端路由，从其他页面跳转进目标页时属于客户端侧DOM更新，而非浏览器原生页面加载
• 你通过Helmet注入的外部脚本是动态插入的，默认走异步加载逻辑，会出现两种时序异常：
  • 外部脚本未加载完成、window.Stuff全局对象还未挂载时，内联初始化脚本就提前执行
  • 初始化脚本执行时，页面内#widget-id挂载节点还未渲染到DOM树中
• 第三方组件内置了容错逻辑，上述两种异常触发时会静默退出，因此控制台无报错。手动刷新页面时浏览器按原生HTML解析顺序执行，节点、依赖都已就绪，所以可以正常加载。

方案1：调整初始化时机（推荐） #

不要将初始化脚本放在Helmet的script数组中，改为在页面组件的useEffect钩子中执行，保证组件挂载、DOM节点已存在，且外部脚本加载完成后再初始化。
首先修改Helmet配置，仅保留外部脚本注入：

<Helmet
    script={[
        {
            type: 'text/javascript',
            src: '//widget-url.com/path/to/jsfile.min.js',
            id: 'widget-script'
        }
    ]}
/>

然后在页面组件中添加初始化逻辑：

import { useEffect } from 'react'

const WidgetPage = () => {
  useEffect(() => {
    const initWidget = () => {
      // 校验依赖和挂载节点都已就绪
      if (!window.Stuff || !document.getElementById('widget-id')) return
      const widget = window.Stuff.happens.here()
      widget.Initialise()
    }

    const script = document.getElementById('widget-script')
    if (!script) return

    // 脚本已加载完成直接初始化
    if (script.complete) {
      initWidget()
    } else {
      // 监听加载完成事件后初始化
      script.addEventListener('load', initWidget)
      return () => script.removeEventListener('load', initWidget)
    }
  }, [])

  return <div id='widget-id'></div>
}

方案2：完全动态加载脚本（兼容性更好） #

如果方案1仍有问题，直接放弃Helmet注入脚本，改为在useEffect中完全动态创建脚本标签，加载时序完全可控：

import { useEffect } from 'react'

const WidgetPage = () => {
  useEffect(() => {
    // 避免重复加载脚本
    if (document.getElementById('widget-script')) {
      window.Stuff?.happens?.here?.()?.Initialise?.()
      return
    }

    const script = document.createElement('script')
    script.src = '//widget-url.com/path/to/jsfile.min.js'
    script.id = 'widget-script'
    script.async = true
    script.onload = () => {
      const widget = window.Stuff.happens.here()
      widget.Initialise()
    }
    document.head.appendChild(script)
  }, [])

  return <div id='widget-id'></div>
}

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