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

Question

我正在创建一个网络应用程序

前端-reactjs和后端Java。

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

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

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

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

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

这取决于您的应用程序的特定要求，但我认为更安全的选择是后端。

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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

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

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

TL / DR：在对您更方便的地方进行，并且不必担心，直到开始进行优化为止。