I’m building a web app using React for the frontend and Spring Boot for the backend. They communicate with each other through REST APIs.
I have a page that displays a list of products that users can filter based on categories, price ranges, and other criteria. I’m considering two different options for implementing the filtering logic:
Client-side filtering:
In this option, I fetch all products once when the app loads, and then I perform the filtering in React as users select different criteria.
Pros: No need for additional network requests during filtering, which provides a faster experience for users. Cons: If I develop a mobile application later, I would have to recreate the filtering functionality.
Server-side filtering:
In this scenario, I send the selected filter parameters to the backend, and it responds with only the matching products.
Pros: The filtering logic is centralized and easier to manage. Cons: Each change in filters requires a network request, which could introduce delays.
What is the best practice for this: should I handle filtering on the client side or server side?
It really depends on your dataset size and what kind of user experience you’re going for. I’ve built similar apps before, and here’s what works best: start with server-side filtering but add smart caching on top. Pull your filtered results from Spring Boot first, then cache the popular filter combos in React state or local storage. You get centralized logic without hammering your server for common searches. If you’ve got under 1000 items, client-side filtering is totally fine. Past that though, you’ll hit performance problems and brutal load times. I’d throw in pagination with your server-side filtering - keeps things snappy even with huge datasets.
yo, that’s a good point! if you’re lookin at lots of products, maybe server-side is better for less data usage. but if users expect real-time updates on stock or prices, then client-side could be tricky, eh? what kind of filters are you thinking about?
depends on your product count. thousands of products? go server-side or you’ll tank performance. but don’t sacrifice ux - try a hybrid approach. load initial results server-side, then cache them for fast local filtering.