How to create an enterprise category page with dynamic filters


(JSharp) #1

How would you setup an enterprise product category page with dynamic category filters?

The problem is the sheer quantity of product data (1 million records in the DB) and the amount of data available for a particular user (typically 80,000 products to filter through). The dynamic product category filters (brand, type, country, etc) are contextual and they need the exact count of products in the respective category. To get that count, we have to perform the full query which looks at user permissions, available products by type and then return that customized list to the user.

We currently have a pure server-side solution where a user clicks a category checkbox and the page posts and returns a new UI to render. We are looking at switching over to React to take make the UI more dynamic and responsive to user input. But the problem still remains with how to deal with massive amounts of data.

What are your thoughts on using micro-services to return smaller bits of data and just update the React state for those properties? How would this work? Is there something better than React’s fetch to handle all of this?

Are there any examples of updating large parts of object lists?

The UI is pretty simple consisting of a

<ProductFilters />
<ProductList />
         <Product />

But the problem is how to update the ProductFilters and ProductList efficiently. The server-side solution takes about 4 seconds to return the data from the database because the counts are very costly.