reactjs - 在 Next.js App 中只为服务器端渲染(SSR)导入 NPM 包

Question

只有当页面第一次加载并且服务器上正在渲染时，我才尝试使用一个私有(private) NPM 模块。我正在使用以下代码，但我仍然能够使用构建分析器在 client.html 中看到我的包 block 。

  if (typeof window === 'undefined') {
    const content = await import('@abc/my-npm-package');
    return conent(payload);
  } else {
    return null;
  }

Answer 1

很好的问题，我查看了 Next.js 的代码，发现为了编写仅存在于服务器上的代码，您需要使用一些传递给 webpack.DefinePlugin (在构建时将用值替换用法，这允许 tree-shaking 工作)。

从这里line , 有一个特殊的变量 process.browser 只有在 browser 中才会是 true。

将您的代码更改为

if (!process.browser) {
  const content = await import('@abc/my-npm-package');
  return conent(payload);
} else {
  return null;
}

2022 年 3 月 16 日更新

Next.js 很快就会弃用 process.browser，区分客户端和服务器的新推荐方法是检查 type of window === 'undefined'//表示它是服务器端。

 if (typeof window === 'undefined') { // server side
    const content = await import('@abc/my-npm-package');
    return content(payload);
  } else { // client side
    return null;
  }