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

Question

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

服务器错误错误：元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到的却是：object。

基于几篇文章，我尝试编写了以下解决方案：

// 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显示客户端组件？

Answer 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}/>
)
}

https://nextjs.org/docs/advanced-features/dynamic-import