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

Posted 2023-03-07

【中文标题】在同构的 Redux 应用程序中，最好的做法是保持 API 调用较小，还是一次性发送所有信息？

【英文标题】：In an isomorphic Redux app, is it better practice to keep API calls small, or to send over all information in one go?

【发布时间】：2017-03-08 01:43:54

【问题描述】：

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

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

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

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

将这个庞大的 API 调用分成许多较小的 API 调用。不过，由于 JS 是单线程的，我必须测量渲染速度才能确定这是否可行。 通过在单击新选项卡时调度新的 API 调用来尝试延迟加载（每个 match 有多个 games，都在新选项卡中）

我在正确的轨道上吗？还是有更好的选择？提前致谢，如果您需要更多示例，请告诉我！

【问题讨论】：

移动设备会使用这个还是严格的桌面设备？

手机也可以

是的，超过 8 秒对于大多数用户来说会感觉像是永恒的，但在移动设备上你可能会经常超时。

同意。 8秒是荒谬的。我认为“延迟加载”是要走的路。

【参考方案1】：

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

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

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

您希望您的页面发送并显示尽可能快的内容。这意味着您不希望等到所有数据都解决后才能为您的 UI 补充水分。 （如果您是真正的服务器端渲染，则必须这样做，因为在许多情况下，您的客户端应用程序将在数据解析并通过线路发送之前至少几秒钟构建和交付。）

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

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

在这种情况下，您可能还想研究持久化数据和缓存。这是一项艰巨的任务，可能比您想要的更复杂。我认识一些同事，他们可能会使用库来为他们处理大部分此类工作。

【讨论】：

这绝对是有道理的。你会建议使用 Redis 之类的东西来缓存流行的查询吗？