1011036: Added guidance for Blazor Server vs Blazor Wasm

blazor-toc.html

@@ -5332,6 +5332,9 @@
 			<li>
 				<a href="/blazor/common/performance-and-scalability/virtualization">Virtualization</a>
 			</li>
+      		<li>
+				<a href="/blazor/common/performance-and-scalability/blazor-server-vs-blazor-webassembly">Blazor Server vs. Blazor WebAssembly Guidance</a>
+       		</li>
 			<li>
 				<a href="/blazor/common/best-practices">Best Practices</a>
 			</li>

blazor/common/performance-and-scalability/blazor-server-vs-blazor-webassembly.md

@@ -0,0 +1,220 @@
+---
+layout: post
+title: Blazor Server vs WebAssembly Syncfusion Components Guide
+description: Compare Blazor Server and WebAssembly hosting models, performance trade-offs, and how Syncfusion Blazor components behave in each scenario.
+platform: blazor
+control: common
+documentation: ug
+---
+
+# Syncfusion Blazor: Server vs WebAssembly Hosting Guide
+
+This guide compares Blazor Server and Blazor WebAssembly hosting models and their performance characteristics. Choose the right model for your app and learn tuning tips to optimize scalability and responsiveness when using Syncfusion Blazor components.
+
+## Hosting Model
+
+A hosting model defines where application code executes and where component state is held: on the server (Blazor Server) or in the browser (Blazor WebAssembly). Syncfusion Blazor components support both models; choosing the right model balances initial load, runtime interactivity, and infrastructure cost.
+
+### Blazor Server
+
+With the Blazor Server hosting model, components are executed on the server. The server processes user interactions (such as button clicks or input changes), updates the app's UI, and sends the changes back to the user's browser. Blazor Server uses a SignalR connection (typically WebSocket, with fallback to Server-Sent Events or long polling) to maintain real-time communication between the server and the client.
+
+### Blazor WebAssembly
+
+The Blazor WebAssembly hosting model runs components client-side in the browser. Components execute on the browser's main UI thread, so you should avoid long-running synchronous operations that could block user interactions and freeze the interface. UI updates and event handling occur within the same process. 
+
+## Comparison
+
+| Hosting Model | Syncfusion Component Behavior | Network Impact |
+|---|---|---|
+| **Blazor Server** | Loads quickly because the client downloads minimal content. UI updates depend on server round trips, which may affect interactions in components like DataGrid, Scheduler, and Diagram when network latency is high. | Low initial download. High runtime network dependency. |
+| **Blazor WebAssembly** | Loads after downloading the .NET runtime and assemblies. Once loaded, interactions such as chart zooming, grid actions, or diagram movements run smoothly in the browser without server communication. | High initial download. Low runtime network dependency.|
+
+## Security Considerations
+
+WebAssembly runs client-side in the browser. **Never store secrets, API keys, or authentication tokens in client-side code.** Always enforce authorization and validate sensitive operations on server-side APIs.
+
+Key guidelines:
+* Treat all client-side code as public and readable by end users.
+* Perform all critical authorization checks and data validation on the server.
+* Use secure, server-side APIs to protect sensitive business logic and data.
+* For Blazor Server, leverage server-side state management; for Blazor WebAssembly, rely on secure backend services for sensitive operations.
+
+## Performance
+
+### Initial Load
+
+Blazor Server starts faster with a minimal client payload, making it ideal when Syncfusion components appear immediately (for example, forms or lightweight dashboards).
+
+Blazor WebAssembly requires downloading the .NET runtime and app assemblies, increasing startup time. Reduce this delay by using **lazy loading** (loading assemblies only when needed) and **AOT compilation**. AOT compilation increases the initial download size, which increases startup download time. However, it significantly improves runtime execution speed for CPU-intensive tasks and complex UI updates. Refer to [Blazor performance best practices](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance) for configuration details, including AOT compilation.
+
+For component-specific guidance, refer to the following documentation:
+* [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/performance)
+* [Scheduler](https://blazor.syncfusion.com/documentation/scheduler/webassembly-performance)
+
+### Interaction Speed
+
+Blazor Server routes UI events (such as DataGrid editing, Scheduler drag operations, or Diagram interactions) over a SignalR connection. This means responsiveness can vary depending on network quality and round‑trip latency.
+
+To improve perceived interaction speed and reduce the number of SignalR messages:
+
+* **Enable UI virtualization** in components like DataGrid, TreeGrid, and ListView to limit the rendered DOM and reduce update frequency.
+* **Batch server-side updates** when possible - group multiple small operations into a single state update.
+* **Minimize round-trips** by performing lightweight logic client-side using JavaScript interop (JS interop) when safe to do so.
+* **Avoid unnecessary re-renders** by using `@key` and structuring components to update only what’s needed.
+
+Blazor WebAssembly, by contrast, processes UI interactions locally in the browser. Features like chart zooming, selection, and drag operations generally respond instantly because they do not require server communication. Data operations still depend on API latency but rendering and interactivity remain smooth.
+
+## Scalability
+
+Blazor Server requires a dedicated SignalR circuit per user. A circuit is a persistent SignalR connection used to maintain state between the server and the browser. Data-heavy Syncfusion components (DataGrid, TreeGrid, Gantt) increase server memory/CPU as concurrent users grow.
+
+Blazor WebAssembly offloads UI logic to the client, enabling efficient global scaling. 
+
+## Responsiveness
+
+Blazor Server’s responsiveness depends on network latency, so interactions such as continuous dragging or chart updates may experience delays on slower connections.
+
+### Prerendering
+
+If you use server-side prerendering, remember that the SignalR circuit is not yet established during the prerender phase. This means:
+
+  * JS interop is unavailable during prerender, and calls will fail unless explicitly guarded.
+  * Authentication state may differ, because the interactive circuit starts only after the client connects.
+
+To avoid errors or inconsistent UI behavior:
+
+  * Guard any logic that depends on JS interop or authenticated user state when running in prerender mode.
+  * Use lifecycle checks such as `OnAfterRenderAsync(firstRender)` and only invoke interop after `firstRender`.
+  * Initialize sensitive UI logic only after the app enters its fully interactive state.
+
+Blazor WebAssembly executes UI logic on the client, providing smooth component interactions. Data operations still depend on API latency.
+
+## Choosing a Hosting Model
+
+Choose **Blazor Server** when:
+* Fast initial load is critical.
+* Sensitive data must remain server-side.
+* The app is form-based or focused on CRUD operations, and uses dashboards that do not allow much interaction.
+
+Choose **Blazor WebAssembly** when:
+* Components demand frequent, fluid interaction (e.g., real-time charting, diagramming).
+* The app targets large or global audiences with low server dependency.
+* Offline support or Progressive Web App (PWA) capabilities are required. Cache Syncfusion JavaScript, CSS, and theme files via service workers to enable reliable rendering of interactive components like Chart and Diagram when offline.
+
+### Hybrid/Migration Tip
+
+Create a shared Razor component library so you can reuse the same components in both Blazor Server and Blazor WebAssembly apps. Test both models easily with Syncfusion demos.
+
+## Tuning Recommendations
+
+If you already have a Blazor project, you can apply the tuning recommendations below. If you need to create a project first, refer to the Syncfusion Blazor getting started guides.
+
+* [WebAssembly](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+
+* [Server](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+
+### Blazor Server
+
+* Enable row virtualization in data-intensive components to minimize rendered items and SignalR updates:
+
+{% tabs %}
+{% highlight razor  %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@TaskData" Height="300" EnableVirtualization="true">
+    <GridPageSettings PageSize="50"></GridPageSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(TaskDetails.TaskID) HeaderText="TaskID" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(TaskDetails.Engineer) HeaderText="Engineer" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(TaskDetails.Designation) HeaderText="Designation" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(TaskDetails.Estimation) HeaderText="Estimation" Format="C2"  Width="120"></GridColumn>
+        <GridColumn Field=@nameof(TaskDetails.Status) HeaderText="Status" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    private List<TaskDetails> TaskData { get; set; }  = new();
+    protected override void OnInitialized()
+    {
+        TaskData = TaskDetails.GenerateData(1000);
+    }  
+    public class TaskDetails
+    { 
+      public static List<TaskDetails> GenerateData(int count)
+      {
+          var names = new List<string> { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
+          var hours = new List<int> { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+          var designations = new List<string> { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
+          var statusValues = new List<string> { "Completed", "Open", "In Progress", "Review", "Testing" };
+          var random = new Random();
+          var result = new List<TaskDetails>();
+          // Generate random data.
+          for (int i = 0; i < count; i++)
+          {
+              result.Add(new TaskDetails
+              {
+                  TaskID = i + 1,
+                  Engineer = names[random.Next(names.Count)],
+                  Designation = designations[random.Next(designations.Count)],
+                  Estimation = hours[random.Next(hours.Count)],
+                  Status = statusValues[random.Next(statusValues.Count)]
+              });
+          }
+          return result;
+      }
+      public int TaskID { get; set; }
+      public string Engineer { get; set; } = string.Empty;
+      public string Designation { get; set; } = string.Empty;
+      public string Status { get; set; } = string.Empty;
+      public int Estimation { get; set; }
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Refer to [DataGrid Virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling).
+
+* Use the `@key` directive on list items to prevent unnecessary re-renders.
+
+{% tabs %}
+{% highlight razor  %}
+
+<ul>
+    @foreach (var item in Items)
+    {
+        <li @key="item.Id">@item.Name</li>
+    }
+</ul>
+
+@code {
+    private List<ItemModel> Items { get; set; } = new();
+
+    public class ItemModel
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+* Optimize SignalR with compression and reconnection policies. Refer to [SignalR Configuration guidance](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr).
+
+### Blazor WebAssembly
+
+* Implement lazy loading for non-startup modules to shrink initial payload.
+* Enable AOT (Ahead-of-Time) compilation to significantly improve runtime execution speed for heavy calculations and visual updates. Note: AOT increases your initial download size; balance this trade-off against your performance and bandwidth requirements.
+* Use component-specific performance tips: 
+  * [DataGrid WebAssembly](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance)
+  * [Scheduler WebAssembly](https://blazor.syncfusion.com/documentation/scheduler/webassembly-performance)
+
+## See Also
+
+* [Blazor Hosting Models](https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models)
+* [Syncfusion Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+* [Syncfusion Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+