( NGRX : Angular 8+) Pagination for a list of vast amount of data coming from a rest api

Question

I am very new to NGRX and I am in need of help to understand the below scenario.

we have 70000+ rows in our database and we want to retrieve them using a REST API to perform the CRUD operations on the front end and present them to the end user in a list of table with pagination. Please note we already have the API written in such a fashion that it can handle the pagination based on the index and size of rows required on the front end.

Question 1: In the above scenario is it a good idea to try NGRX for the pagination or else it would be better to go with the original approach of calling the list API with changed pagination parameters on every click of a page number and retrieve the number of rows required directly from the backend ?

Question 2: Also, when we try to perform a pagination using NGRX do we need to fetch all the data from the backend at once and keep it cached in the NGRX Store and perform pagination from the front end itself ?

Thank you for the help in advance... and sorry if the question is not up to the mark.

Tried to understand this from different websites and videos but could not get a very satisfactory answer for the same.

Answer 1

The pagination has always to be performed on server side. Imagine sending 70000 rows from the backend to the frontend. That is what the pagination is for, not having to get all the data. I think what you should do is to fetch from the backend just the data of a single page, based on the parameters you get from your pagination component (page number, page size, ecc)

Answer 2

I think that answer to that question is "it depends". Retrieving such huge payload from API is literally no different than declaring array of similar size. However answering your Question 1, I would say that in most cases downloading such large payload form API is pointless and thus bad. Usually you should avoid downloading unnecessary data, however I can imagine some weird use cases that might require such approach, probably for "offline" scenarios. Question 2 - As I've said, there is no different between fetching such large payload from API using RxJS and declaring it manually in your code, at least memory wise. JavaScript should handle that. Also execution of such approach is up to you and your needs. You can download everything at once, you can fetch data only partially and then pre-fetch more from server while getting close to already downloaded limit. You can download page by page and use store as "cache" for previously visited pages.