Gatsby.js网站嵌入Clutch.co Widget无法渲染的问题求助

我帮你梳理了几个Gatsby集成Clutch Widget的常见解决方案，你可以挨个尝试：

1. 用useEffect动态加载脚本（推荐） #

Gatsby的服务器端渲染（SSR）环境没有浏览器的document对象，直接用React Helmet可能导致脚本在服务器端提前执行，无法正确注入到客户端。用useEffect可以确保脚本只在组件挂载到浏览器后加载：

import { useEffect } from 'react';

const ClutchWidget = () => {
  useEffect(() => {
    // 创建脚本元素
    const script = document.createElement('script');
    script.src = 'https://widget.clutch.co/static/js/widget.js';
    script.type = 'text/javascript';
    script.async = true;
    
    // 添加到页面body
    document.body.appendChild(script);

    // 组件卸载时清理脚本，避免重复加载
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div 
      className="clutch-widget" 
      data-url="https://widget.clutch.co" 
      data-widget-type="7" 
      data-height="65" 
      data-clutchcompany-id="XXXXXXX"
    ></div>
  );
};

export default ClutchWidget;

2. 修正React Helmet的使用方式 #

如果你坚持用React Helmet，需要确保组件只在客户端渲染，同时给脚本加上async属性：

import { Helmet } from 'react-helmet';

const ClutchWidget = () => {
  // 只在浏览器环境渲染组件，避免SSR报错
  if (typeof window === 'undefined') {
    return null;
  }

  return (
    <>
      <Helmet>
        <script 
          type="text/javascript" 
          src="https://widget.clutch.co/static/js/widget.js"
          async
        ></script>
      </Helmet>
      <div 
        className="clutch-widget" 
        data-url="https://widget.clutch.co" 
        data-widget-type="7" 
        data-height="65" 
        data-clutchcompany-id="XXXXXXX"
      ></div>
    </>
  );
};

export default ClutchWidget;

3. 手动触发Widget初始化 #

部分第三方Widget在单页应用（比如Gatsby）中，路由切换后需要手动触发初始化。你可以在脚本加载完成后调用Clutch的全局初始化方法：

import { useEffect } from 'react';

const ClutchWidget = () => {
  useEffect(() => {
    const loadAndInitWidget = () => {
      const script = document.createElement('script');
      script.src = 'https://widget.clutch.co/static/js/widget.js';
      script.type = 'text/javascript';
      script.async = true;

      // 脚本加载完成后初始化Widget
      script.onload = () => {
        if (window.ClutchWidget) {
          window.ClutchWidget.init();
        }
      };

      document.body.appendChild(script);

      return () => {
        document.body.removeChild(script);
        if (window.ClutchWidget) {
          delete window.ClutchWidget;
        }
      };
    };

    loadAndInitWidget();
  }, []);

  return (
    <div 
      className="clutch-widget" 
      data-url="https://widget.clutch.co" 
      data-widget-type="7" 
      data-height="65" 
      data-clutchcompany-id="XXXXXXX"
    ></div>
  );
};

export default ClutchWidget;

4. 清除缓存并测试生产环境 #

有时候本地开发的缓存会导致脚本未更新，你可以：

• 执行gatsby clean清除Gatsby缓存
• 重启开发服务器：gatsby develop
• 构建生产版本测试：gatsby build && gatsby serve（开发环境和生产环境的渲染逻辑有差异，可能生产环境才会正常显示）

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