Node.js 在React中，在加载web应用程序时加快大型初始数据获取

与我正在从事的项目类似，在其主页顶部有一个搜索栏：

在链接的网站上，当访问该网站时，搜索栏似乎立即起作用。据统计，MLB历史上大约有2万名MLB玩家，这是对这个选择小部件中下拉项数量的一个很好的估计

在我的项目中，目前需要10-15秒（从MongoDB，使用Node+Express）才能获取包含select下拉项数据的约15mb数据表。这15mb的数据是我在这个表中所能做的最小数据，因为它只包含两个键（1个用于

id

，1个用于

名称

，用于每个下拉列表）。这个表很大，因为在我的项目的select小部件中有超过150K个选项可供选择。目前，我必须在加载数据的前15秒禁用小部件，这会导致糟糕的用户体验

当用户访问select时，是否有任何方法使select小部件所需的数据立即可供select使用，这样就不必禁用该小部件？特别是：

• 我可以使用localstorage在用户浏览器中存储此表吗？15MB对于本地存储是否太大？该表的大小每天都在变化/增加（不是太持久），localstorage中的表第二天就会过时，不是吗
• 我能避免一起做这件事吗？是否有一种方法可以仅在用户搜索该用户时将正确的数据加载到react中
• 还有别的办法吗

---

对于此选择，更快地保存/获取15mb数据将大大改善react应用程序的用户体验。

您链接到的站点上的数据大小基本上为20k。它不包含所有的播放器，但当您单击下拉列表中的链接时，会根据需要获取数据。因此，如果您有20Mb的可搜索数据，那么您需要找到一种只根据需要加载数据的方法。如何明智地做到这一点取决于数据的性质。许多后面有大型结果集的搜索栏将使用提前键入搜索，用户的输入在键入时被发回（以适当的去盎司间隔），与用户输入匹配的搜索结果实时发回（通常限制在前20或50个结果）

---

因此，基本上答案是找到一种只提供用户所需数据的方法，而不是将整个数据库下载到浏览器（列表中的选项2）。显然，您必须提供一个搜索API才能实现这一点。

谢谢，我将对此进行研究。您熟悉在React中执行此操作的库/方法吗？它实际上非常简单，只需通过axios或类似工具（axios似乎是默认库）执行参数化GET请求即可。挑战在于构建API端点。这里有一个类似的教程：这就是为什么要添加一个去盎司延迟——您需要等待很短的时间，以避免向服务器发送垃圾邮件请求。请注意，如果是更复杂的搜索，您当然也可以等待用户单击搜索。网络选项卡-第一项称为“玩家”。如果您查看响应，它是该下拉列表的HTML内容。你看，它的大小是22.1kb。为了让你放心，我写了一个类似的搜索，搜索一个医院应用程序，后端可能有数千名患者。我们在服务器上使用elasticsearch来提高速度，但mongo可以。