如何在Next.js中预加载脚本？页面首次渲染加载失败求助

先修正你的错误用法 #

你在useEffect里直接写<Script />是无效的——JSX组件必须作为渲染结果返回，不能在useEffect的回调里直接声明却不渲染，这种写法不会把脚本插入到DOM中。

针对性解决方案 #

1. 原生脚本加载+手动初始化（推荐）

直接用原生JS创建脚本标签，确保在DOM容器存在后再加载脚本，并且手动触发初始化（避免脚本加载时容器还未挂载）：

import { useEffect, useRef } from 'react';

const GreenhouseJobsBoard = () => {
  const boardRef = useRef(null);

  useEffect(() => {
    if (!boardRef.current) return;

    const script = document.createElement('script');
    script.src = 'https://boards.greenhouse.io/embed';
    script.async = true;

    script.onload = () => {
      // 手动触发Greenhouse的iframe渲染，根据官方文档调整全局方法
      if (window.greenhouseEmbed) {
        window.greenhouseEmbed.render(boardRef.current);
      }
    };

    script.onerror = (e) => {
      console.error('Greenhouse脚本加载失败:', e);
    };

    document.body.appendChild(script);

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

  return <div ref={boardRef} data-board-url="你的Greenhouse看板URL"></div>;
};

export default GreenhouseJobsBoard;

2. 正确使用Next.js Script组件

确保脚本加载时机晚于目标容器挂载，同时通过onLoad手动触发初始化：

import Script from 'next/script';
import { useRef } from 'react';

const GreenhouseJobsBoard = () => {
  const boardRef = useRef(null);

  const handleScriptLoad = () => {
    if (boardRef.current && window.greenhouseEmbed) {
      window.greenhouseEmbed.render(boardRef.current);
    }
  };

  return (
    <>
      <div ref={boardRef} data-board-url="你的Greenhouse看板URL"></div>
      <Script
        src="https://boards.greenhouse.io/embed"
        strategy="afterInteractive" // 确保客户端交互后加载，DOM已就绪
        onLoad={handleScriptLoad}
        onError={(e) => console.error('脚本加载失败:', e)}
      />
    </>
  );
};

export default GreenhouseJobsBoard;

3. 规避SSR/SSG的影响

如果你的页面是服务端渲染（SSR）或静态生成（SSG），脚本可能在客户端DOM未就绪时就执行了。可以把看板组件设为客户端仅渲染：

// 父组件中
import dynamic from 'next/dynamic';

const GreenhouseJobsBoard = dynamic(() => import('./GreenhouseJobsBoard'), {
  ssr: false, // 禁止服务端渲染，仅在客户端加载
});

export default function Page() {
  return <GreenhouseJobsBoard />;
}

4. 强制刷新脚本缓存

如果是浏览器或CDN缓存导致的首次加载失败，给脚本URL加版本参数强制重新获取：

// 示例：加?v=1
<Script src="https://boards.greenhouse.io/embed?v=1" />

额外提示 #

• 确认你的页面上存在Greenhouse脚本要求的DOM容器（通常需要带data-board-url等属性），脚本依赖这个容器生成iframe。
• 查看Greenhouse官方嵌入文档，确认是否需要调用特定的全局初始化函数（不同版本的脚本可能有差异）。

内容的提问来源于stack exchange，提问作者S.Dewett