Filters logic should be on frontend or backend? Filters logic should be on frontend or backend? reactjs reactjs

Filters logic should be on frontend or backend?


Filter and limit on the back end. If you had a million records, and a hundred thousand users trying to access those records at the same time, would you really want to send a million records to EVERY user? It'd kill your server and user experience (waiting for a million records to propagate from the back end for every user AND then propagate on the front end would take ages when compared to just getting 20-100 records and then clicking a (pagination) button to retrieve the next 20-100). On top of that, then to filter a million records on the front-end would, again, take a very long time and ultimately not be very practical.

From a real world stand point, most websites have some sort of record limit: Ebay = 50-200 records, Amazon = ~20, Target = ~20... etc. This ensures quick server responses and a smooth user experience for every user.


This depends on the size of your data.For eg: If you are having a large amount of data, it is better to implement the filter logic on the backend and let the db perform the operations.

In case, you have less amount of data, you can do the filter logic on the front end after getting the data.

Let us understand this by an example.Suppose you have an entity having 1,00,000 records and you want to show it in a grid.In this case it is better to get 10 records on every call and show it in a grid.If you want to perform any filter operation on this, it is better to make a query for the db on the backend and get the results

In case it you have just 1000 records in your entity, it will be beneficial to get all the data and do all the filter operations on the frontend.


It depends on the specific requirements of your application, but in my opinion the safer bet would be the back-end.

Considering you need filtering in the first place, I assume you have enough data so that paging through it is required. In this case, you need to have the filtering on the back-end.

Lets say you have a page size of 20. After you apply the filter you would expect to have a page of 20 entities that match that specific filtering criteria in the UI. This can't be achieved if you fetch 20 entities, store them in the front-end and afterwards apply the filter on them.

Also, if you have enough data, fetching all of it in the front-end will be impossible due to memory constraints.