SSR场景下react-helmet注入Google Optimize脚本初始化失败

问题现象 #

在网页中接入Google Optimize时，常规操作是将对应脚本标签添加到页面header区域，示例代码如下：

<head>
   <script src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
   </script>
</head>

当前部署环境为基于Node.js实现服务端渲染（SSR）的React.js应用，最初使用React-Helmet将上述脚本标签注入页面head元素，写法如下：

<Helmet>
   <script src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
   </script>
</Helmet>

SSR模式下运行时，页面可以正常输出预期的script标签，浏览器也能成功加载该脚本，但Google Optimize始终无法正确初始化（该结论通过Chrome扩展Google Tag Legacy Assistant检测得出）。
站点其他场景下均正常使用react-helmet注入资源，从未出现异常，仅Google Optimize脚本存在该问题。
后续尝试绕过react-helmet，直接将脚本写入静态index.html文件，此时Google Optimize可以完全正常运行，对应代码和常规接入写法一致。

排查过程 #

排查中发现，react-helmet渲染script标签时，会自动注入data-react-helmet="true"属性，该属性是react-helmet内部用于避免重复注入标签的标识。
尝试在静态index.html的脚本标签上手动添加该属性，发现Optimize立刻无法正常加载，对应代码如下：

<head>
   <script data-react-helmet="true" src="https://www.googleoptimize.com/optimize.js?id=OPT-ABC123">
   </script>
</head>

最初提出两点猜想：

• 浏览器对该data-*属性存在特殊处理逻辑
• react-helmet对硬编码的script标签做了额外的隐式操作
  待验证方向：
• 是否服务端渲染环节存在干扰，尤其是React.js客户端执行hydration步骤时，可能触发了script标签的重新渲染？

UPDATE #1
此前尝试在脚本URL的查询字符串中添加时间戳参数，后续验证该方案无效，之前的生效表现应为缓存导致。

根因说明 #

问题和浏览器对data-*属性的特殊处理无关，核心是两个机制的逻辑冲突：

1. React-Helmet的工作逻辑决定了，所有带data-react-helmet="true"标识的head标签，都会在客户端hydration阶段被重新处理：哪怕服务端已经输出了结构完全一致的标签，客户端执行时也会先移除旧标签，再重新插入匹配的新标签。
2. Google Optimize自带严格的加载校验和防重复执行机制：为了避免实验样式加载晚于页面渲染导致的内容闪烁（FOUC），Optimize要求自身必须在DOM初始解析阶段同步加载，一旦检测到自身是在DOM解析完成后被动态插入、或者被移除后重新挂载，就会直接终止初始化流程。
   手动在静态HTML的脚本上加data-react-helmet="true"属性后，React-Helmet在hydration阶段照样会重写这个标签，因此会直接触发Optimize的拦截逻辑，导致初始化失败。

可行解决方案 #

• 优先推荐方案（稳定性最高）：完全绕过React-Helmet管理Optimize脚本。直接把Optimize的script标签硬编码到SSR入口HTML模板的<head>区域最靠前位置，放在所有GTM/GA脚本、React应用挂载代码之前，不要给标签加任何额外自定义属性，从根源上避免React生态对这个脚本标签的DOM操作。
• 需统一用React-Helmet管理资源时的方案：升级到维护状态更稳定的react-helmet-async，注入脚本时显式声明<script async={false} defer={false} src="对应Optimize地址">，同时通过Helmet的onChangeClientState钩子拦截Optimize对应标签的重写逻辑，避免hydration阶段移除重插标签。该方案需要针对React-Helmet版本做兼容测试，稳定性弱于硬编码方案。
• 上层框架适配方案：如果是基于Next.js、Remix等封装好的SSR框架开发，直接使用框架原生提供的脚本组件加载Optimize，配置加载策略为“交互前加载/阻塞渲染加载”，不要交给React-Helmet托管，保证脚本在hydration流程启动前就完成加载执行。

内容的提问来源于stack exchange，提问作者peter.swallow