Next.js 架构

Question

我正在寻找一些 Next.js 架构建议

我正在将一个非常大的 Express NodeJS 应用程序迁移到 Next.js 设置，该应用程序具有自定义 SSR 设置。

对于当前的 NodeJS 站点，我有：

• 一堆路由（连接控制器/apis，做花哨的重定向等）
• 有大量的中间件
• 一堆 express 控制器中的大量逻辑（这些控制器执行 API 调用、转换数据、验证和某些 React 组件的 SSR 以形成应用程序）
• 大多数情况下，NodeJS 服务器调用其他微服务 API（在同一个 VPC 上）来获取这些控制器内的数据（例如：search api、auth api、location api 等 - 它们都是单独的 REST api 服务器）注意：当它从这些 API 仅在内部 api 地址上完成
• 当路由发生变化时，React 网站本身调用相同的 NodeJS 服务器以通过客户端 JS 获取数据eg:前端 URL 将是：www.mywebsite.com.au 并且从前端完成的任何 api 调用都是通过路由完成的：www.mywebsite.com.au/api/*

根据我迄今为止阅读的所有文档，我认为最佳设置是：

1. 为了保持我现有的路由/中间件（我有很多）的快速设置，这包括/api/*那些
2. 将控制器获取逻辑迁移到可公开访问的 express api /api/*（我已经拥有但需要清理）
3. 对于现有的快速控制器路由，将它们路由到 Next.js 并用于nextApp.render特定的下一页
4. getInitialProps在 Next.js 页面中使用从我在 2 中提到的那些 api 获取数据。
5. 还将 Express 控制器中的旧道具转换逻辑添加到 getInitialProps

这是为了让服务器和客户端共享相同的内容逻辑getInitialProps- 这将使架构干净，并让我能够平滑过渡到使用Link。

我正在努力解决的问题是第 4 步。

这意味着现在在页面请求的 SSR 上，它需要调用公共 api ( www.mywebsite.com.au/api/*)getInitialProps以获取其数据。

对我来说，这样做似乎是一种性能开销，因为它需要一个网络跳转到公共域mywebsite.com.au来获取它可能在同一请求中本地获得的数据（localhost:3000/api/*例如通过调用）

关于如何避免服务器渲染外部网络跃点的任何建议？我可以检测它是否是服务器渲染然后使用内部 URL（例如：localhost:3000/api/*在对同一 Web 服务器的请求上使用）或者这不是使用 Next.js 时的最佳实践吗？

Answer 1

服务器需要调用自身来获取数据，获取数据所涉及的大量开销都与延迟有关（即在客户端和最近的数据中心之间），这在其（数据中心 -> 数据中心）时较少受到关注。

如果性能仍然是一个问题，那么您的下一个最佳选择是进行 SSR 缓存，您可以在快速谷歌搜索中找到许多不同的方法，但这取决于您的托管/设置。