在使用 Next.js 进行开发的时候，会遇到某些组件是不提供 SSR 支持的（很正常，毕竟 SSR 是一个相对比较小众的应用场景。此外，某些组件会依赖浏览器环境的上下文），在这种情况下，我们需要一种方式来实现对非 SSR 组件的支持。

一般而言， 有两种方式，一种是使用 useEffects 来控制组件的载入，从而实现只在客户端层面加载组件，服务端渲染的时候就不再加载该组件。

另外一种方式是可以考虑借助于 Next.js 自带的 Dynamic Import 的特性，来完成组件的引入。

在使用层面比较简单，引入组件的方式从直接引入改为最外层套一层 dynamic 函数即可

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
Code language: JavaScript (javascript)

总结

这个问题的解决让我再次激起了对于 Next.js 的兴趣。过去因为不确定如何解决在浏览器和客户端环境下的问题，对于 Next.js 有些畏难；如今问题已解决，可以继续放心的使用 Next.js 了。

参考阅读

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