在 React 中，在加载 Web 应用程序时加速大量初始数据获取

Question

与我正在进行的项目类似，this website 在其主页顶部有一个搜索栏：

在链接的网站上，搜索栏在访问该网站时似乎立即起作用。根据their own website，MLB 历史上大约有大约 20,000 名 MLB 球员，这是对这个选择小部件中下拉项目数量的一个很好的估计。

在我的项目中，当前需要 10 到 15 秒才能对包含约 15mb 数据的表进行此提取（从 MongoDB，使用 Node + Express），其中包含选择的下拉项的数据。这 15mb 的数据尽可能小，因为它只包含两个键（1 个用于 id，1 个用于每个下拉列表的 name）。这个表很大，因为在我的项目的选择小部件中有超过 150K 的选项可供选择。我目前必须在加载数据的前 15 秒内禁用小部件，这会导致糟糕的用户体验。

有没有什么方法可以在用户访问时使选择小部件所需的数据立即可供选择使用，这样就不必禁用小部件？特别是：

• 能否使用 localstorage 将此表存储在用户浏览器中？ 15MB 对于本地存储来说太大了吗？该表每天都会更改/增加大小（不太持久），然后本地存储中的表将在第二天过时，不是吗？
• 我是否可以完全避免进行此提取？是否有一种方法可以加载正确的数据，以便仅在用户搜索该用户时做出反应？
• 其他方法？

为此选择更快地保存/获取 15mb 的数据将大大改善我们的 React 应用的用户体验。

Answer 1

您链接到的网站上的数据基本上是 20k 大小。它不包含所有玩家，但当您单击下拉列表中的链接时会根据需要获取数据。因此，如果您有 20Mb 的可搜索数据，那么您需要找到一种仅根据需要加载它的方法。如何明智地做到这一点取决于数据的性质。许多带有大量结果集的搜索栏将使用预输入搜索，其中用户的输入在输入时被回传（具有适当的去抖动间隔），并且与用户输入匹配的搜索结果被实时发送回（通常限制为，比如说，前 20 或 50 个结果）。

因此，基本上答案是找到一种仅提供用户需要的数据的方法，而不是基本上将整个数据库下载到浏览器（列表中的选项 2）。您显然必须提供一个搜索 API 以允许这种情况发生。