which way is better? | 易学教程

问题

I am developing an E-Commerce website using React, Redux, the website shows some products, these products can be sorted or filtered by a selectbox with some options.

I have two options for filtering products:

1 - fetching products everytime from the server and doing a check in the fetch function for example:

products = products.filter(p =>
    options.find(o => p.categories.find(category=> category=== o))
);

2 - fetching products once then creating a reducer that filters products every time different option is selected

Which one would be better in the term of best practice and performance??

UPDATE: fetch function

const fetchProducts = (categories) => {
  fetch('products API')
    .then(res => {
      let { products } = res.data;

      if (!categories && categories.length > 0) {
        products = products.filter(p =>
          categories.find(category => p.categories.find(size => size === category))
        );
      }

      return dispatch({
        type: FETCH_PRODUCTS,
        payload: products
      });
    })
    .catch(err => {
      console.log('Could not fetch products);
    });
};

回答1:

It depends on the application you are building. If you are handling a large dataset then you should prefer server-side filtering.

The reason being that client-side filtering might result in a number of issues. For example, the client might show previously cached data to the user even though things on the server have been updated.

Also, you can implement techniques like throttling and debouncing to improve your application's efficiency.

In short, if your dataset is small, you can go on with client-side filtering. But to always be safe, I prefer server-side filtering.

来源：https://stackoverflow.com/questions/57635870/which-way-is-better

标签

reactjs

redux