Rendering thousands of DOM elements at once is slow and memory-intensive. Blazor's built-in Virtualize component solves this by only rendering items currently visible in the viewport.

Basic Usage

<div style="height:400px;overflow-y:auto">
    <Virtualize Items="allProducts" Context="product">
        <ProductRow Product="product" />
    </Virtualize>
</div>

With ItemSize for Best Performance

<Virtualize Items="items" Context="item" ItemSize="60">
    <div style="height:60px">@item.Name</div>
</Virtualize>

Loading from API on Demand

For truly large datasets, use ItemsProvider to fetch only the visible page from the server on scroll:

<Virtualize ItemsProvider="LoadProductsAsync" Context="product">
    <ProductRow Product="product" />
</Virtualize>

@code {
    private async ValueTask<ItemsProviderResult<Product>> LoadProductsAsync(
        ItemsProviderRequest request)
    {
        var result = await ProductService.GetPageAsync(
            request.StartIndex, request.Count);
        return new ItemsProviderResult<Product>(result.Items, result.TotalCount);
    }
}

Reference:

Wikipedia: Virtual DOM

https://en.wikipedia.org/wiki/Virtual_DOM