Next.js客户端组件动态导入后页面没反应怎么办？

羽墨 ☘︎ 提问于 2026-02-04 13:26:28 阅读 53

框架

我在Next.js项目里用”use client”创建了客户端组件，然后用import()动态加载另一个组件，但点击加载按钮后页面完全没反应，控制台也没报错，这是怎么回事？

我尝试这样写的：

import useSWR from 'swr'

export default function ClientComponent() {
  const [module, setModule] = useState(null)
  
  const loadComponent = async () => {
    const mod = await import('../components/DynamicComponent')
    setModule(() => mod.default)
  }

  return (
    
      
      {module && }
    
  )
}

按文档说客户端组件应该支持动态导入，但实际测试完全没效果。是不是需要配合什么特殊配置？或者Next.js的客户端组件有隐藏的限制？

我来解答赞 7 收藏

反馈

1 条解答

开发者洋辰 Lv1

动态导入没问题，但你少了个关键步骤——组件没被真正渲染出来。你存了组件引用到 state 里，但 React 不知道它需要触发更新渲染这个组件。

改成这样：

const DynamicComponent = module ? module : null



return (

  <div>

    <button onClick={loadComponent}>加载组件</button>

    {DynamicComponent && <DynamicComponent />}

  </div>

)

另外加个错误处理也省得静默失败：

const loadComponent = async () => {

  try {

    const mod = await import('../components/DynamicComponent')

    setModule(() => mod.default)

  } catch (err) {

    console.error('加载失败', err)

  }

}

2026-02-04 14:01