ag-grid Client-Side row model in community edition - not behaving as official docs

Question

Using ag-grid-community 22.1.1 version in Angular 7

If we go by official docs then client side model should load only the records available or set in pagination size. But that does not happen. When browser makes a request it waits till all the records are loaded and response is returned before the view starts rendering.

Can someone explain is my understanding wrong from the below wordings

Here are more detailed rules of thumb.

If you are not sure, use default Client-Side. The grid can handle massive amounts of data (100k+ rows). The grid will only render what's visible on the screen (40 rows approximately, depending on your screen size) even if you have thousands of rows returned from your server. You will not kill the grid with too much data - rather your browser will run out of memory before the grid gets into problems. So if you are unsure, go with Client-Side Row Model first and only change if you need to. With Client-Side, you get sorting, filtering, grouping, pivoting and aggregation all done for you by the grid. All of the examples in the documentation use the Client-Side model unless specified otherwise.

Link to official docs explaining different row models and when to use what.

Based on that if am expecting my api is going to return 500 records and my [paginationPageSize]="40" Should't it load 40 records and render,although in background it can still load all other remaining records to the browser cache. But it looks like it is waiting for whole set of records to load to browser cache and then starts rendering which is impacting the performance.

The below is the line confusing the most

The grid will only render what's visible on the screen (40 rows approximately, depending on your screen size)

Answer 1

ag-grid and for that matter any grid, in client side model, will fetch all the records first and then starts rendering in browser. But, it will only render the numbers of rows which fit into the visible view. This is for a very good reason.

Consider a scenario where the user of your application is searching/filtering on a certain field in the grid, if grid does not have all the data with it at that time (it is still fetching from server in background) it may return Not Found even though matching record(s) exist(s) in the data which is yet to come. Same problem would be there for sorting,grouping etc. operations.

This link on ag-grid doc states clearly

By default the grid expects you to provide all the data up front. In other words, your application loads the full set of data into the client and then passes it in its entirety to the grid. This is in contrast to Server-Side Data where the data is mostly kept on the server and loaded into the grid in parts.

Now, the reason it renders 40 or so record in view is because creating and rendering HTML for all rows will make the page very slow or unusable.

You need to opt for server side model if you wish to fetch data in chunks from server. But then it involves more work to implement filtering,sorting etc.