时间戳

首页 > 解决方案 > 如何在 Next.js 中最好地导入“仅服务器”代码？

javascript - 如何在 Next.js 中最好地导入“仅服务器”代码？

问题描述

在getServerSideProps我的索引页面的函数中，我想使用一个函数foo，从另一个本地文件导入，它依赖于某个 Node 库。所述库不能在浏览器中运行，因为它依赖于“仅服务器”模块，例如fs或request.

我一直在使用以下模式，但想对其进行优化。将其定义foo为可变以使其在范围内是笨拙的，并且似乎可以避免。

let foo;
if (typeof window === "undefined") {
  foo =  require("../clients/foo");
}

export default function Index({data}) {
  ...
}

export async function getServerSideProps() {
  return {
    props: {data: await foo()},
  }
}

这里的最佳做法是什么？是否有可能利用 ES6 的动态导入功能？动态导入 inside怎么 getServerSideProps样？

我正在使用 Next.js 版本9.3.6。

谢谢。

更新：

似乎 Next.js 自己的动态导入解决方案就是这个问题的答案。我仍在测试它，并会在完成后相应地更新这篇文章。文档对我来说似乎很困惑，因为他们提到禁用 SSR 的导入，但反之则不然。

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

标签： javascriptnode.jsnext.jsisomorphic-javascript

解决方案

使用getServerSideProps/Next.jsgetStaticProps时会自动从客户端包中删除所有仅服务器代码。在浏览器上运行服务器代码没有风险。

您可以使用Next.js 代码消除工具来验证客户端捆绑的内容。您会注意到getServerSideProps/getStaticProps和它使用的导入一样被删除。

推荐阅读