如何在 NextJS 中使用客户端组件？答案

【问题标题】：How to use a client-side component in NextJS?如何在 NextJS 中使用客户端组件？
【发布时间】：2022-11-02 10:11:00
【问题描述】：

我想使用一个名为 react-wordcloud 的基于 D3 的 React 组件。它在 React 中运行良好，但会使 Nextjs 崩溃并出现以下错误：

服务器错误错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

根据几篇文章，我尝试编写了以下解决方法：
// WORKAROUND 1
{typeof window === "undefined" ? 
     <div>loading...</div>) :  
     <WordCloud words={words} />
 }
 
 // WORKAROUND 2
{process.browser && <WordCloud words={words} />}

 // WORKAROUND 3
{process.browser && 
  <div suppressHydrationWarning>
  <WordCloud words={words} />
  </div>
}

 // WORKAROUND 4
<div suppressHydrationWarning>
<WordCloud words={words} />
</div>
它们都不起作用。构建不断崩溃。是否有任何解决方案可以强制 NextJS 显示客户端组件？

【问题讨论】：

标签： reactjs d3.js next.js

【解决方案1】：

在 Next 中，要仅在客户端呈现组件，您需要使用 next/dynamic。这将阻止在服务器上渲染组件，即使渲染组件的页面使用 SSR 或 SSG。

在WordCloud 组件中dynamic 可以这样使用：

import dynamic from 'next/dynamic'

const ReactWordCloud = dynamic(() => import('react-wordcloud'), {
  ssr: false,
})

export default function WordCloud({words}){
  return (
    <ReactWordCloud words={words}/>
  )
}

【讨论】：