diff --git a/blazor/common/performance-and-scalability/large-data-handling.md b/blazor/common/performance-and-scalability/large-data-handling.md index 2b71bfc00d..d2935cddd7 100644 --- a/blazor/common/performance-and-scalability/large-data-handling.md +++ b/blazor/common/performance-and-scalability/large-data-handling.md @@ -9,23 +9,19 @@ documentation: ug # Handling Large Data in Blazor Components -Handling large datasets efficiently is a critical requirement for modern Blazor applications. With the right data handling strategies, applications can reliably display and interact with thousands of records while maintaining a fast and responsive user interface. - -[Blazor components](https://www.syncfusion.com/blazor-components) are built to ensure responsive rendering, smooth scrolling, and efficient memory usage, even when working with large volumes of data. By leveraging capabilities such as data virtualization, server side data operations, lazy loading, and optimized rendering pipelines, these components minimize UI overhead and deliver consistent performance. - -This document provides guidance on how to load and interact with large datasets effectively in Blazor applications using **Blazor components**, enabling scalable data experiences without compromising usability or performance. +[Blazor components](https://www.syncfusion.com/blazor-components) handle large datasets efficiently through data virtualization, server side processing, lazy loading, and optimized rendering pipelines. This documentation explains how to load and interact with large datasets in Blazor applications while maintaining performance. ## Understanding data size and processing location -Before choosing a data handling approach, it’s important to decide where the data operations should happen, either on the client side in the browser or on the server side in backend services. This decision usually depends on factors such as how large the dataset is, network speed, bandwidth, and how much memory is available in the browser. +Before choosing a data handling approach, it’s important to decide where the data operations should happen, either on the client side or on the server side. Consider dataset size, network speed, bandwidth, and browser memory. ### Client side data processing -Client side processing means loading the entire dataset into the browser and performing operations like sorting, filtering, and searching locally. This approach is generally suitable when the dataset is small and easy to handle. It works when the browser can comfortably manage all the data without affecting performance, and reducing server communication is a priority. +Load the entire dataset into the browser and perform operations like sorting, filtering, and searching locally. Best for small datasets (typically under 10,000 records). ### Server side data processing -Server side processing transfers the workload from the browser to the server. Instead of sending all the data at once, the client requests only the required portion when needed. For instance, when a user applies a filter or navigates between pages, a request is sent to the server, which processes it and returns only the relevant data. This approach is ideal for large or growing datasets, particularly when data comes from a database or external service and performance, scalability, and reliability are required. +The server handles filtering, sorting, and searching. The client requests only the required data when needed. Ideal for large or growing datasets, especially when data comes from a database. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -57,54 +53,66 @@ Server side processing transfers the workload from the browser to the server. In {% endhighlight %} {% endtabs %} -For more information on configuring server side data operations and remote data binding using Blazor components, see the following documentation: +For more information on remote data binding, see [DataManager Overview](https://blazor.syncfusion.com/documentation/data/getting-started) and [Remote Data Binding](https://blazor.syncfusion.com/documentation/data/adaptors). -- [DataManager Overview](https://blazor.syncfusion.com/documentation/data/getting-started) -- [Remote Data Binding](https://blazor.syncfusion.com/documentation/data/adaptors) - -N> Client side processing is generally suitable for smaller datasets, typically fewer than 10,000 simple records. When working with larger datasets, it is better to rely on server side processing along with techniques like paging and virtualization. This approach helps maintain better performance and ensures the application remains scalable and responsive. +N> Use server side processing with paging and virtualization for datasets larger than 10,000 records. ## Enable paging to limit rendered records -Paging divides data into smaller sets and renders only one page at a time. This approach helps reduce the number of elements rendered in the DOM, which improves the initial load time and keeps the interface responsive. +Paging divides data into smaller sets and renders only one page at a time. This reduces DOM elements, speeds up initial load, and keeps the interface responsive. -By using paging, applications load faster, consume less browser memory, and provide a more structured and predictable navigation experience for users. +In the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), enable paging using the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property. -For example, when paging is enabled in the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), the component requests only a single page of records from the server at a time, reducing data transfer and improving performance. For more details, refer to the DataGrid documentation on [Handling paging operation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor#handling-paging-operation). +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -## Use incremental loading (load-on-demand) +@using Syncfusion.Blazor.Grids + + + + + + + + +@code { + public class Order + { + public int? OrderID { get; set; } + public string CustomerID { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} -Incremental loading, also known as load-on-demand, retrieves data in smaller chunks based on user interaction. Instead of loading all records at once, additional data is fetched only when it is needed, such as when a user navigates through the data or scrolls within a component. +For more details, refer to [Handling paging operation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor#handling-paging-operation). -This approach is particularly helpful for very large datasets, where loading everything upfront would impact performance and responsiveness. +## Use incremental loading (load-on-demand) -Incremental loading is triggered by actions like moving between pages, scrolling through a list, or expanding rows and nodes in hierarchical components. Because data is loaded progressively, the application feels faster and remains responsive to user actions. +Incremental loading (load-on-demand) fetches data in smaller chunks as needed. For example, when navigating pages or scrolling through a list. This keeps the app responsive with large datasets. -For example, the [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) supports incremental loading through the [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) feature, where child records are retrieved from the server only when a parent row is expanded. This avoids unnecessary data loading and improves efficiency. +The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) supports incremental loading through the [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_LoadChildOnDemand) feature. Child records load only when a parent row expands. For more information, refer to the [load-on-demand](https://blazor.syncfusion.com/documentation/treegrid/data-binding?cs-save-lang=1&cs-tab-name=RAZOR&cs-lang=razor#loadchildondemand) documentation. -N> Incremental loading retrieves additional data blocks as needed, whereas virtualization reduces the number of DOM elements rendered in the UI. These techniques are often used together, where incremental loading handles backend data fetching and virtualization optimizes client side rendering. +Incremental loading fetches additional data blocks as needed, while virtualization reduces DOM elements. Use both together for best performance. ## Apply server driven querying -For large datasets, filtering, sorting, grouping, and searching should be handled on the server. In this approach, the component sends query parameters to the server, and only the processed result set is returned. +For large datasets, let the server handle filtering, sorting, grouping, and searching. The component sends query parameters to the server, which returns only the processed result. -This method helps avoid sending large amounts of data to the client and reduces the amount of memory and processing required in the browser. As a result, applications remain more efficient and scalable, especially when handling data intensive scenarios. +When a user applies a column filter, the filter criteria are sent to the server, and only matching records return. -For example, when a user applies a column filter in the DataGrid, the filter criteria are sent to the server. The server then processes the request and returns only the matching records, ensuring efficient data retrieval and optimal performance. - -For more information, refer to the documentation [Handling server side filtering using adaptors](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor#handling-filtering-operation). +For more information, refer to the [Handling server side filtering using adaptors](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor#handling-filtering-operation) documentation. ## Use virtualization or infinite scrolling -**Virtualization** improves performance by rendering only the visible items in the viewport. As the user scrolls, existing UI elements are reused instead of creating new ones. - -**Infinite scrolling** loads additional data blocks automatically as the user scrolls, eliminating the need for explicit pagination controls and providing a continuous scrolling experience. +**Virtualization** renders only the visible items in the viewport. As you scroll, existing UI elements reuse instead of creating new ones. -These techniques are especially useful when working with very large datasets, where smooth scrolling is important. +**Infinite scrolling** auto loads more data as the user scrolls, providing a continuous scrolling experience without pagination controls. -Virtualization and infinite scrolling are supported in several Blazor components. For example, in the DataGrid, virtualization can be enabled using the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) property to render only the visible records for improved performance. +In the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), enable virtualization using the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -178,17 +186,15 @@ The following measured values may vary based on browser, device, hosting model ( | 10,000 | ~0.9 s | ~91.5 s | | 20,000 | ~2.0 s | ~219 s | -N> Without virtualization, render time increases as record count grows because all rows are rendered in the DOM. With virtualization enabled, render time remains nearly constant by limiting the DOM rows to those visible in the viewport, ensuring smooth UI performance for larger datasets. +Without virtualization, render time grows with record count because all rows load into the DOM. -For more information, refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) documentation for [Virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) and [Infinite scrolling](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling). +For more information, refer to the [Virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) and [Infinite scrolling](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling). ## Handle streaming data in Blazor Server -Blazor Server applications rely on SignalR to handle communication between the client and the server. When very large datasets are sent in a single SignalR message, it can increase the message size significantly and affect application stability, including higher memory usage on the server circuit. +[Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-9.0#blazor-server) uses SignalR for client server communication. Sending large datasets in a single SignalR message increases message size and affects stability. -To avoid these issues, it is better not to send large amounts of data in one go. Instead, techniques like paging, virtualization, or incremental loading should be used for UI related data. For scenarios that involve large or bulk data transfers, it is more efficient to use a Web API or a gRPC streaming endpoint, while keeping SignalR focused on smaller, real time updates such as notifications or UI interactions. - -When features such as persistence are enabled with a large number of columns, SignalR message size limits may be exceeded, potentially resulting in connection errors. In such cases, adjust the SignalR configuration or reduce the amount of state being persisted. +Use paging, virtualization, incremental loading, or Web API/gRPC streaming for large data transfers. Keep SignalR for smaller real time updates like notifications. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -201,21 +207,21 @@ builder.Services.AddSignalR(hubOptions => {% endhighlight %} {% endtabs %} +When persistence is enabled with many columns, SignalR message size limits may be exceeded, causing connection errors. Adjust SignalR configuration or reduce persisted state. + For more details on SignalR configuration, refer to the [official documentation](https://learn.microsoft.com/en-us/aspnet/core/signalr/configuration?view=aspnetcore-9.0&tabs=dotnet#configure-server-options). ## Apply lazy loading for improved user experience Lazy loading defers data retrieval until it is actually required. Instead of loading all data upfront, fetch data only when the user performs a specific action. -In many cases, data is loaded only after a user action. For example, it can be retrieved as a component becomes visible, a node is expanded in a hierarchical structure, or additional details or related records are requested. - -Lazy loading improves perceived performance by reducing initial load time and allows users to interact with the application while data is being retrieved in the background. +For example, when a component becomes visible, a node expands, or additional details are requested. Lazy loading improves perceived performance by reducing initial load time. For an example of implementing the [LoadChildOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_LoadChildOnDemand) pattern in hierarchical [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) components, refer to the [Gantt Chart data binding](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#load-child-on-demand). ## How Blazor components handle large data -Blazor components are built with large data scenarios and follow these core principles. +Blazor components are built for large data scenarios and follow these core principles. * Virtualized rendering for optimal UI performance * Server side query execution using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and adaptors