我正在创建一个 Web 应用程序
Frontend - reactjs 和 backend java。
前端和后端通过休息相互通信。
在 UI 上，我显示一个项目列表。我需要过滤它们以用于一些参数。
选项 1：滤波器逻辑位于前端
在这种情况下，我只需要对后端进行get调用并获取所有项目。用户选择某些筛选器选项后，ui 上会发生筛选。
优点：为此，我不需要将数据发送到后端并等待响应。刷新列表的速度应该更快。
缺点：如果我需要多个前端客户端。比方说一个移动应用程序。我也需要在这个应用程序上再次创建过滤器。
选项 2：筛选器逻辑位于后端
在这种情况下，我在加载应用程序时获取所有列表项。用户更改筛选器选项后，我需要发送带有筛选器参数的 get 请求并等待响应。之后，更新 UI 上的项列表。
优点：过滤器逻辑只写一次。
缺点：速度可能会慢得多。因为发送请求并返回结果需要时间。
问：过滤器逻辑应该在哪里？在前端还是在后端？或者什么是最佳实践？
在后端进行筛选和限制。如果您有一百万条记录，并且有十万用户同时尝试访问这些记录，您真的想向每个用户发送一百万条记录吗？它会扼杀你的服务器和用户体验（等待一百万条记录从后端传播给每个用户，然后在前端传播，而只获得20-100条记录，然后单击（分页）按钮检索下一个20-100条记录，这将花费很长时间）。最重要的是，在前端过滤一百万条记录将再次花费很长时间，最终不是很实用。
从现实世界的角度来看，大多数网站都有某种记录限制：Ebay = 50-200条记录，亚马逊= ~20条，Target = ~20...等。这确保了快速的服务器响应和每个用户的流畅用户体验。
这取决于数据的大小。例如：如果您拥有大量数据，则最好在后端实现过滤器逻辑并让db执行操作。
如果数据量较少，可以在获取数据后在前端执行筛选器逻辑。
让我们通过一个例子来理解这一点。假设您有一个实体有 1，00，000 条记录，并且您希望在网格中显示它。在这种情况下，最好在每个调用上获取 10 条记录，并将其显示在网格中。如果要对此执行任何筛选操作，最好在后端对db进行查询并获取结果
如果您的实体中只有1000条记录，那么获取所有数据并在前端执行所有过滤操作将是有益的。
