过滤器逻辑应该在前端还是后端？

Question

我正在创建一个Web应用程序

前端-reactjs和后端java。

前端和后端通过休息彼此通信。

在UI上，我显示项目列表。我需要过滤一些参数。

选项1：过滤器逻辑位于前端

在这种情况下，我只需要对后端进行一次get调用并获取所有项目。用户选择某些过滤器选项后，ui上将进行过滤。

优点：为此，我不需要将数据发送到后端并等待响应。刷新列表的速度应该更快。

缺点：如果我需要多个前端客户端。假设有一个移动应用。比我还需要在此应用上再次创建过滤器。

选项2：过滤器逻辑位于后端

在这种情况下，我会在加载应用程序时获得所有列表项。用户更改过滤器选项后，我需要发送带有过滤器参数的get请求并等待响应。之后，更新UI上的项目列表。

优点：过滤器逻辑仅写入一次。

缺点：速度可能会慢很多。因为发送请求和返回结果需要时间。

问题：过滤器逻辑应该在哪里？在前端还是后端？也许什么是最佳做法？

Answer 1

这取决于您的应用程序的具体要求，但在我看来，更安全的选择是后端。

考虑到您首先需要过滤，我假设您有足够的数据，因此需要对其进行分页。在这种情况下，您需要在后端进行过滤。

假设您的页面大小为 20。在您应用过滤器后，您希望页面中的 20 个实体与 UI 中的特定过滤条件相匹配。如果您获取 20 个实体，将它们存储在前端，然后对它们应用过滤器，则无法实现这一点。

此外，如果您有足够的数据，由于内存限制，在前端获取所有数据将是不可能的。

Answer 2

过滤并限制后端。如果您有一百万条记录，并且十万个用户试图同时访问这些记录。您是否真的要向每个用户发送一百万条记录？这将杀死您的服务器和用户体验（与仅获取20-100条记录然后单击一个按钮进行检索相比，等待每个用户从后端传播一百万条记录，然后在前端进行传播将花费一些时间。接下来的20-100）。最重要的是，要再次过滤前端的一百万条记录，将花费很长时间，并且最终不是很实际。

从现实世界的角度来看，大多数网站都有某种记录限制。Ebay = 50-200条记录，Amazon =〜20，Target =〜20 ...等等。这确保了快速的服务器响应和每个用户的流畅用户体验。

Answer 3

这取决于数据的大小。例如：如果您有大量数据，最好在后端实现过滤器逻辑，并让数据库执行操作。

如果您的数据量较少，则可以在获取数据后在前端进行过滤逻辑。

让我们通过一个例子来理解这一点。假设您有一个拥有1,00,000条记录的实体，并且希望将其显示在网格中。在这种情况下，每次调用最好获得10条记录并将其显示在网格中。如果要对此执行任何筛选操作，最好在后端查询数据库并获取结果

如果您的实体中只有1000条记录，则获取所有数据并在前端执行所有筛选操作将非常有益。

Answer 4

最有可能从前端开始（除非您正在处理大量数据）：

1. 在前端实现过滤（除非出于某种原因在后端进行过滤更容易，我认为这不太可能）。
2. 迭代直到过滤功能有些稳定。
3. 分析您的流量，看看努力实现后端过滤是否有意义。查看实际过滤的请求百分比，以及您从后端过滤中获得的节省。
4. 根据#3 的结果实施（或不实施）后端过滤。

作为个人笔记，接受的答案是糟糕的建议：

• “如果您有 100 万条记录，同时有 10 万用户试图访问这些记录”；没有什么能强迫十万用户使用过滤，你的系统应该能够处理那个世界末日情景。后端过滤应该只是一种优化，而不是解决方案。
• 一旦您在后端进行过滤，您可能还想进行分页；如果您想要一致的结果，这不是一个微不足道的功能。
• 进行后端过滤可能比仅仅进行前端过滤复杂得多；您应该意识到您将花费大量时间（不仅用于初始实施，还用于持续维护）并问问自己这是否不是过早的优化。

TL/DR：做任何对你来说更容易的事情，不要担心，直到开始优化才有意义。