NextJS引入Gradio第三方脚本后，gradio-app组件无法渲染求助

算力阿峰

2026-6-22

解决NextJS中Gradio嵌入组件无法渲染的问题

可行解决方案

方案1：调整脚本加载策略并手动初始化

NextJS的beforeInteractive加载时机过早，此时DOM中的<gradio-app>元素尚未挂载，导致Gradio脚本无法完成组件初始化。改用lazyOnload策略，并在脚本加载完成后手动触发初始化：

import Script from 'next/script'

export default function Home() {
  const initGradio = () => {
    window.gradio?.init();
  };

  return (
    <>
      <Script
        type="module"
        src="https://gradio.s3-us-west-2.amazonaws.com/4.36.1/gradio.js"
        strategy="lazyOnload"
        onLoad={initGradio}
      />
      <gradio-app src="https://multimodalart-hallo.hf.space"></gradio-app>
    </>
  )
}

方案2：关闭React Strict Mode（临时兼容）

NextJS默认开启的Strict Mode会触发组件两次渲染，可能干扰自定义元素的生命周期。在next.config.js中关闭该模式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

问题根源

脚本加载时机不匹配：beforeInteractive策略会在HTML解析阶段加载脚本，此时<gradio-app>元素还未被React渲染到DOM中，Gradio无法检测到目标元素完成初始化。
Strict Mode的双重渲染：自定义元素的初始化逻辑可能在第二次渲染时被重复执行或异常终止，导致组件无法正常挂载。