1

我正在探索 nextjs 示例with-redux-wrapper,他们展示了如何使用 redux-wrapper 和服务器端渲染创建 nextjs react 应用程序。

我想在请求时从 MongoDB 集合中加载一些数据。这可以使用客户端数据获取(例如使用 fetch/swr)轻松完成。但是,如果需求需要与页面本身一起加载数据,那么使用 NextJS 的服务器端呈现功能是有意义的。

请注意,NextJS 文档(本节底部的两个注释)建议不要进行本地api 调用以在内部使用 REST 获取数据,getServerSideProps()并建议在内部使用相同的后端 api 代码。

现在,如果我使用一个简单的 nextjs 应用程序并将 mongodb 连接/查询包装在 中getServerSideProps(),它会按预期工作。但是,当使用该with-redux-wrapper示例时,mongodb 库最终会强制客户端查找用于服务器端的库,从而导致以下错误:

error - ./node_modules/mongodb/lib/core/auth/gssapi.js:2:0
Module not found: Can't resolve 'dns'
null

我的困惑是:

  1. 死代码消除应该从客户端(源代码)删除用于服务器端渲染的代码。在这种情况下,mongo db 客户端在调用发起时不应该按预期工作getServerSideProps()吗?我什至用typeof window === 'undefined'检查来确保它只在服务器中执行。
  2. 当不使用 redux 时,整个体验都有效。为什么在使用 redux(-wrapper) 时会中断?如何修复?

PS 我知道我们可以使用 webpack 配置为丢失的库注入空库,但这似乎更像是一种 hack 而不是解决方案。我想知道这种方法有多安全/具体。

4

0 回答 0