Next.js：如何将仅外部客户端的 React 组件动态导入到开发的服务器端渲染应用程序中？

Question

我知道这个问题之前已经被问过多次，但似乎没有一个解决方案有效。

我正在尝试使用库“react-chat-popup”，它仅在 SSR 应用程序的客户端呈现。（使用 next.js 框架构建）使用此库的正常方法是调用import {Chat} from 'react-chat-popup'然后直接将其渲染为<Chat/> 。

我为 SSR 应用程序找到的解决方案是在动态导入库之前检查componentDidMount方法typedef of window !=== 'undefined'因为通常单独导入库会导致window is not defined错误。 所以我找到了链接https://github.com/zeit/next.js/issues/2940 ，它提出了以下建议：

Chat = dynamic(import('react-chat-popup').then(m => {
  const {Foo} = m;
  Foo.__webpackChunkName = m.__webpackChunkName;
  return Foo;
}));

但是，当我这样做时，我的 foo 对象变为空。 当我在回调中打印出 m 对象时，我得到{"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"}在这种情况下，如何正确导入库并开始使用<Chat/>元素？

Answer 1

我设法通过首先在顶部声明一个变量来解决这个问题：

let Chat = ''

然后在 componentDidMount 中以这种方式进行导入：

async componentDidMount(){
        let result = await import('react-chat-popup')
        Chat = result.Chat
        this.setState({
            appIsMounted: true
        })
    }

最后像这样渲染它：

<NoSSR>
   {this.state.appIsMounted? <Chat/> : null}
</NoSSR>

Answer 2

Next js 现在有自己的方式来进行动态导入，无需 SSR。

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

这是他们文档的链接： next js

Answer 3

您自己提到了解决方案，该组件只能在客户端运行，因此您只能使用条件在客户端上呈现它。 执行以下操作只会在客户端呈现组件并解决您的问题：

if (process.browser) {
  // client-side-only code
  <Chat/>
}

您不必担心如何导入组件，只需像任何其他组件一样import {Chat} from 'react-chat-popup' ，它就会被添加到客户端包（以及服务器端，但它是服务器，因此即使不使用它也可以将其放在那里）。

这可能值得一读： https : //github.com/zeit/next.js/issues/2473