node.js - 在同构 Redux 应用程序中，保持 API 调用较小还是一次性发送所有信息是更好的做法吗？

Question

我正在使用 React (ES6)/Redux/React-Router-Redux 中的服务器端渲染构建一个体育数据可视化应用程序。在顶部，有一个基于类的 App 组件，并且有两个不同的基于类的组件路由。 (其中的所有内容都是无状态功能组件)，结构如下:

App
|__ Index (/)
|__ Match (/match/:id)

当对给定路由发出请求时，将调度一个 API 调用，其中包含给定路由的所有信息。它托管在不同的服务器上，我们在其中使用 Restify 和 Sequelize ORM。返回的 JSON 对象大约有 12,000 到 30,000 行长，返回时间从 500 毫秒到 8500 毫秒不等。

因此，我们的应用程序需要很长时间才能加载，我认为这是主要瓶颈。我心里有几个选择。

1. 将这个巨大的 API 调用分成许多较小的 API 调用。不过，由于 JS 是单线程的，我必须测量渲染的速度来确定这是否可行。
2. 通过在点击新选项卡时分派(dispatch)新的 API 调用来尝试延迟加载(每个比赛有多个游戏，全部位于新选项卡中)

我走在正确的道路上吗？或者有更好的选择吗？预先感谢，如果您需要更多示例，请告诉我!

Answer 1

这取决于很多因素，包括您的目标客户是谁。移动设备会使用这个还是严格的桌面设备？

从您到目前为止所说的来看，我会选择“延迟加载”。

无论哪种方式，您通常都不希望任何应用强制用户等待，尤其是不要超过 8 秒。

您希望您的页面发送并显示出能够尽快运行的内容。这意味着您不希望等到所有数据解析完毕之后才能为 UI 提供水合效果。 (如果您真正进行服务器端渲染，则必须发生这种情况，因为在许多情况下，您的客户端应用程序将在数据解析并通过线路发送之前至少几秒钟构建和交付。)

如果您的移动设备网络连接不稳定，由于超时，它们可能永远不会看到此页面。

看起来基于访问其他页面的分页和延迟加载可能是一个很好的解决方案。

在这种情况下，您可能还需要考虑保留数据和缓存。这是一项相当大的任务，可能比您想要的更复杂。我认识一些同事，他们可能会使用库来为他们处理大部分此类内容。