在Remix中嵌入GitHub Gist失败，求解决方法

直接使用原生<script>标签在Remix中嵌入GitHub Gist通常不会生效，这是因为Remix作为服务端渲染（SSR）框架，外部脚本的执行时机和DOM节点绑定逻辑和纯静态页面不同。以下是两种可行的解决方法：

方法一：动态加载脚本（自定义React组件） #

利用React的useEffect钩子在客户端动态创建并加载Gist脚本，确保DOM节点就绪后再执行脚本：

import { useEffect, useRef } from 'react';

export default function GistEmbed({ gistId }) {
  const containerRef = useRef(null);

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

    // 清理已存在的脚本，避免重复加载
    const existingScript = document.getElementById(`gist-script-${gistId}`);
    if (existingScript) existingScript.remove();

    const script = document.createElement('script');
    script.id = `gist-script-${gistId}`;
    script.src = `https://gist.github.com/AnthonyLzq/${gistId}.js`;
    script.async = true;
    containerRef.current.appendChild(script);

    // 组件卸载时清理脚本
    return () => script.remove();
  }, [gistId]);

  return <div ref={containerRef} />;
}

在你的Remix路由或组件中使用该组件：

import GistEmbed from '~/components/GistEmbed';

export default function MyRoute() {
  return (
    <div>
      <h1>我的嵌入Gist</h1>
      <GistEmbed gistId="7d1cfeda389b7f5f38b62bd2640a32ba" />
    </div>
  );
}

方法二：使用第三方React库 #

借助成熟的第三方库react-gist简化嵌入流程：

1. 安装依赖：

npm install react-gist
# 或
yarn add react-gist

2. 在组件中使用：

import Gist from 'react-gist';

export default function MyRoute() {
  return (
    <div>
      <Gist id="7d1cfeda389b7f5f38b62bd2640a32ba" />
    </div>
  );
}

这两种方法都能确保Gist脚本在客户端正确执行并渲染内容，解决原生<script>标签不显示的问题。

内容的提问来源于stack exchange，提问作者Anthony Luzquiños