javascript - 禁用 next.js 服务器端渲染以防止窗口未定义错误

Question

我有一个我维护的私有(private) NPM 包，我在 Next.js 项目中使用它。这两个项目都是 React、Typescript 项目。
我最近在 NPM 项目中添加了一个图表，现​​在遇到了问题；该 NPM 包中对 window 的所有调用都会引发错误 window is undefined在 Next.js 项目中
由于我正在使用一个我无法控制的库来构建我的图表，因此我无法将对 window 的调用封装在某种 if (typeof window !== "undefined") 中。陈述。
在我什至调用使用图形库的组件之前，我在构建 Next.js 项目时遇到了这些错误。简单地将我的 NPM 包包含在我的主项目中会导致出现这些错误。
是否可以仅针对该特定图形库或我的整个 NPM 包停止服务器端渲染？
或者，任何其他解决方案都会受到欢迎，无论多么疯狂。

Answer 1

鉴于您提到的约束。我认为没有太多选择。你根本没有window node 中的对象环境。
您可以渲染页面的其他可能 SSR 的部分。并且您可以使用 ssr: false 动态渲染对于由于 window 而无法进行 SSR 的部分目的。

import dynamic from 'next/dynamic'

// wrap your component that uses the graph lib.
const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/myGraphComponent'),
  { ssr: false }
)

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

引用:
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr