我应该在后端（Rails API）还是前端（React/Redux）上查询和过滤

Question

I have an app that allows users to sort and filter through 30,000 items of data. Right now I make fetch requests from Redux actions to my rails API, with the queries being handled by scope methods on my rails end. My instructor is recommending that I move all my querying to my front-end for efficiency, but I'm wondering if it really will be more performant to manage a Redux state object with 30,000 objects in it, each with 50 of their own attributes.

(A couple extra notes: Right now I've only run the app locally and I'm doing the pagination server-side so it runs lightning fast, but I'm a bit nervous about when I launch it somewhere like Heroku. Also, I know that if I move my querying to the front-end I'll have more options to save the query state in the URL with react-router, but I've already sort of hacked a way around that with my existing set-up.)

Answer 1

Let's have a look at the pros and cons of each approach:

Querying on Front End

• 👍 Querying does not need another network request
• 👎 Network requests are slower because there is more data to send
• 👎 App must store much more data in memory
• 👎 Querying is not necessarily more efficient because the client has to do the filtering and it usually does not have the mechanisms to do so effectively (caching and indexing).

Querying on Back End

• 👍 Less data to send to client
• 👍 Querying can be quite fast if database indexes are set up properly
• 👍 App is more lightweight, it only holds the data it needs to display
• 👎 Each query will require a network request

The pros of querying on Back End heavily outweighs that on Front End. I would have to disagree with your instructor's opinion. Imagine you want to search for something on Google and Google sends all relevant results you want to your browser and does the pagination and sorting within your browser, your browser would feel extremely sluggish. With proper caching and adding database indexes to your data, network requests will not be a huge disadvantage.