Limiting Rendering to Visible Parts by Using Virtualization

When we build web applications, we sometimes need to load a large number of data onto a web page. However, a large volume of data may affect the loading time of the page.

There are various solutions to this problem. One way is to use pagination, which allows us to load only one page of data at a time. When pagination is used, the dataset is split into separate pages, and we load only one page at a time. Alternatively, we can use infinite scroll and load more data asynchronously when we scroll to the bottom of the screen.

Blazor solves this problem by utilizing a feature known as virtualization. This feature allows us to load only as much data as can fit on the screen. However, other than that, the page looks as if the entire dataset has been loaded. It has a scroll bar that looks like we have the full set of data on the page. When we scroll down, the items appear on the page as if they were always there, although they are dynamically added to the page as we scroll down.

To demonstrate how virtualization works, we have the following project setup. We are using the FetchData page that can be found in a standard Blazor template. Instead of loading data directly into it and using a foreach statement to populate the rows of the table, we populate them via virtualization.