javascript - Next.js 架构

Question

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

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

对于我当前的 NodeJS 站点:

• 一堆路由(连接 Controller /api，做花哨的重定向等)
• 拥有大量的中间件
• 一堆快速 Controller 中的大量逻辑(这些 Controller 执行 API 调用、转换数据、验证和一些 React 组件的 SSR 以形成应用程序)
• 大多数时候，NodeJS 服务器调用其他微服务 API(在同一 VPC 上)以在这些 Controller 中获取数据(例如:搜索 api、auth api、位置 api 等——它们都是独立的 REST api 服务器)注意:当它从这些 API 中获取时，它仅在内部 api 地址上完成
• 当路由发生变化时，React 网站本身调用同一个 NodeJS 服务器通过客户端 JS 获取数据 eg: 前端 URL 为:www.mywebsite.com.au 从前端完成的任何 api 调用都是通过路由完成的:www.mywebsite.com.au/api/*

根据我目前阅读的所有文档，我认为最好的设置是:

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

这样服务器和客户端就可以共享 getInitialProps 中的相同逻辑 - 这将使架构变得干净，并让我能够顺利过渡到使用 Link.

我遇到的问题是第 4 步。

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

对我来说，执行此操作似乎是一种性能开销，因为它需要到公共(public)域 mywebsite.com.au 的网络跳转来获取它本可以在同一请求上本地获取的数据(通过调用 code>localhost:3000/api/* 例如)

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

Answer 1

服务器需要调用自己来获取它的数据，获取数据所涉及的很多开销都与延迟有关(即客户端和最近的数据中心之间)，当它的(数据中心 ->数据中心)。

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