How to load data faster/more correctly?

Question

JavaScript

We have a catalog with filters, there are about 400 elements in the catalog. How to load data into it faster?
As it happens now - the user sets parameters in the filter, the site makes an ajax request, receives a new array with data, passes it to vue, which redraws the directory. The problem is that it doesn't work very fast. The server does not differ in stability and can give back in 200ms or maybe in 2000ms with the same requests.
Would it be faster to pass the entire array to vue on site load and filter already on the vue side without using ajax?
And how is it appropriate to make such directories with a small number of elements (less than 1000) and a large one (more than 10000)?

Answer 1

A couple of cases, after which the idea of ​​"passing to the front and filtering there" ceases to seem so good
1) An array of 10,000 elements arrived. The client logged in with a Samsung galaxy S2 , tried downloading/filtering, saw how the browser hung, and left. Do not forget that not all users sit from desktops like developers with 16-32Gb of RAM. The mobile phone may choke corny because of the large json
2) As soon as you need to do pagination, filtering at the front will give out unexpectedly incorrect data
Kick the server-side, let the developers either cache or arrange the indexes in the database correctly if they have SQL, or switch to a suitable search engine with faceted search
I believe that it is possible to do issuance and filtering purely at the front with any number of elements, if the team consists of solid ninjas and rockstars, but practice in 3 similar situations shows that in the end this filtering will have to be rewritten at least to hybrid (and support 2 solutions , on the front for a small number of records, and on the back for a large one), or completely on the server side, since unfortunately the team never consists of ideal developers, more often of ordinary living people

Answer 2

"The server does not differ in stability" what's the point of talking about technology if your server poherit any of them? It’s still not clear what elements, this is a product with a header and a small description or 400 articles of 60k characters each. If you already use a view, then take any framework on top of it, such as a view, there are tables with pagination already built in.

Answer 3

And how is it appropriate to make such directories with a small number of elements (less than 1000) and a large one (more than 10000)?

Catalog pagination. Filtering on 1 button, not on every form change. Next, look at the structure of queries to the database.

Answer 4

You can load data in the background.
Those. load the first time only what the user sees on the first page. Show it to him and send requests for the remaining data in the background.
Works well on medium volumes.
Get a bonus in display speed, especially if the data doesn't change often. The user went to another route, then returned - you got the data from the state and showed it. No requests.
In this case, you will need to:
1. Use vuex - to store data in the state
2. Write search / sorting / filtering / pagination logic on the front