仅在 Next.js 应用程序中导入 NPM 包用于服务器端渲染（SSR）

Question

我仅在第一次加载页面并且在服务器上进行渲染时才尝试使用一个私有 NPM 模块。我正在使用以下代码，但我仍然可以使用构建分析器在 client.html 中以块的形式查看我的包。

  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-shake 工作的原因）。

从这一行开始，有一个特殊变量process.browser，该变量仅存在于浏览器true中。

将您的代码更改为

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

更新 16.03.2022

Next.js 很快就会弃用process.browser，区分客户端和服务器的新推荐方法是通过检查type of window === 'undefined' // means that it's server side.

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