Should I filter data in backend or frontend?

Question

I have a web service built with Spring, my view is built with React and I use Redux for state management.

Let's say my API has an endpoint /api/products and I've implemenented search functionality, which pulls all the products from the enpoint, stores them in Redux store and displays them. Now I want to implement sorting functionality and I have two ideas for achieving it:

1. Modify my api endpoint /api/products to take parameters. For example /api/products?sortBy=price (less logic in UI, more network requests)

2. Use the products that I have stored in the store. (less network requests, more logic in UI)

Which one of these, if any, would be considered as the best practice?

Answer 1

It would depend on

• What is the acceptable latency? How often do you need to call this list? Almost every second, like in an autocomplete field? Say, a few times a minute, for a report which is sorted by different parameters by the user? Or something like a rarely used settings page?
• How much data do you have? Is it a few million? or a few dozen? If it is too many, better to filter in the backend and send only the required rows.
• How big is each row? If each row is big with many fields, your payload will increase.
• Are you having to make a tradeoff between initial load time (to load all the data from the backend once) vs responsiveness (when the user is interacting with the data)?

I hope this will give you the general idea on how to decide. Maybe able to discuss more if you have details of your specific situation.