Should I load database results all at once or make

I want to filter a large database with the following columns:

name - max-height - min-height - range - max-angle - min-angle

I want to filter it to match certain criteria the user can insert before, e.g. if the user enters the max-height (80cm) it should display list all the entries which max-height is smaller than 80cm. (The user can also enter more criteria).

The input looks like this:

I'm planning to use the onchange property to filter it while the user enters something.

I use node.js as backend and Vue.js as main frontend framework. My question is if it's better to load all of the data from the database into an array and send it to the frontend and filter it there or if it's better to make a request to the database whenever a user enters a criteria.

It depends on the size of the dataset because of:

Server resources used (CPU, RAM, etc.)
Bandwidth used
Time to transfer
Client resources used (CPU, RAM, etc.)

[Server Resources]: Depending on the availability of server resources, you could unnecessarily eat up allocated hosting capacity by generating and sending large datasets. This could mean more costly hosting and/or server slowdown and a slow user experience. Adding additional concurrent users would contribute to the effect.

[Bandwidth]: The same goes for using up too much bandwidth / transfer capacity.

[Time to transfer]: If sending a large dataset takes too long, it may create an unnecessarily slow user experience, especially for users with slower connections who have to wait even longer.

[User Resources]: Transfer time aside, if the dataset uses too much of the user's resources (RAM, etc.) that could also create a slow user experience from device slowdown or freezing, especially on devices with less capacity. Users may connect from a wide variety of devices.

[Conclusion]: If these things are not concerns or the dataset isn't large enough to cause any of these issues: send the whole thing if you want. It can even be beneficial to send one comprehensive request to the server instead of numerous little connection requests.

Other thoughts:

[Caching]: It might also be sensible, depending on the app, to send the data once per user and store it locally, in the user's localStorage, for example. Then implement some checks to confirm the right data is stored on subsequent visits. (Some size limits apply to localStorage, and it's different on different browsers.)

[Testing]: You can determine what cutoff size is acceptable for your situation through testing and analyzing the metrics mentioned.