Phinter Atieno for Syncfusion, Inc.

Posted on Nov 13 • Originally published at syncfusion.com on Nov 12

Syncfusion Announces Day-1 Support for .NET 10 in Blazor Components

#blazor #net10 #blazordevelopment #syncfusion

TL;DR:.NET 10 Blazor introduces major performance and productivity enhancements, including script optimization, state persistence, and navigation fixes. Plus, Syncfusion provides day 1 support, enabling developers to use advanced controls like DataGrid, Charts, and Scheduler immediately.

Blazor developers, get ready for a major upgrade! .NET 10 is here, and it’s packed with performance boosts, productivity enhancements, and smarter navigation features that make building modern web apps faster and easier. As an LTS release, .NET 10 ensures long-term stability while introducing game-changing improvements like script optimization, state persistence, and Hot Reload for Razor.

And the best part? Syncfusion offers day 1 support, so you can immediately leverage enterprise-grade UI components, DataGrid, Charts, Scheduler, optimized for .NET 10. Whether you’re building dashboards, reporting tools, or complex web apps, this release sets a new standard for speed and scalability.

.NET 10 Blazor: Key reasons developers should upgrade

1. Blazor script optimization

With .NET 10, Blazor’s core script file blazor.web.js has been completely optimized for speed and efficiency. This update introduces two major improvements:

Compressed delivery: Scripts are now served using Brotli or Gzip compression, significantly reducing file size and accelerating download times.
Fingerprinting for WASM: Previously available only for server-side apps in .NET 9, fingerprinting now extends to Blazor WebAssembly. A unique hash is appended to file names (e.g., blazor.web.[hash].js), enabling long-term caching while ensuring browsers always fetch the latest version when changes occur.

These enhancements deliver tangible benefits for Blazor WebAssembly applications:

Faster load times: Smaller scripts mean quicker downloads, especially on mobile or slower networks.
Improved caching: Fingerprinted assets allow browsers to cache files effectively, reducing redundant downloads and improving repeat visit performance.
Reduced payload size: Minimizes initial load data for better responsiveness.

Blazor Script Fingerprinting

The [hash] is automatically generated during the build process and ensures that browsers fetch the latest version when changes occur.

Hashed Script Filename

Performance metrics for .NET 9 vs .NET 10:

Sample type	.NET 9	.NET 10
Blazor Web App Server (blazor.web.js)	850 – 990ms	450 – 550ms
Standalone Blazor WASM (blazor.webassembly.js)	250- 300ms	30 – 120ms

2. Parallel preloading with

In previous Blazor versions, applications loaded resources in a strict sequence: HTML → JavaScript → Runtime → DLLs → App. Each stage waited for the previous one to finish, creating a bottleneck that slowed startup times.

.NET 10 solves this with the new built-in <ResourcePreloader /> razor component. This component emits <link rel="preload"> tags for critical resources like the WebAssembly runtime and assemblies, allowing them to start downloading immediately. By the time the JavaScript loader runs, other essential files are already in progress.

Why this matters:

Faster initialization: Parallel downloads reduce the time needed for the app to become interactive.
Better responsiveness: Users experience quicker load performance and smoother navigation.

Syncfusion Blazor components, especially those with rich UI and heavy data, such as DataGrid, Chart, and Scheduler, benefit significantly from this improvement. With resources preloaded in parallel:

Components render more quickly.
Initial data binding happens sooner.
The overall user experience is smoother and more responsive.

This enhancement is particularly valuable for enterprise-grade apps and performance-critical scenarios such as dashboards, reporting tools, and real-time data visualizations.

3. Conditional row styling with RowClass

Blazor’s new QuickGrid introduces the RowClass property, making it easy to apply dynamic CSS classes to rows based on their data. This simplifies conditional styling and keeps UI logic clean.

Syncfusion Blazor already offers similar functionality through the RowDataBound event in SfGrid, giving developers full control to style rows programmatically.

.razor

@using Syncfusion.Blazor.Grid

<SfGrid DataSource="@Orders" RowDataBound="OnRowDataBound">
    <GridColumns>
        <GridColumn Field="OrderID" HeaderText="Order ID" Width="120" />
        <GridColumn Field="CustomerName" HeaderText="Customer Name" Width="150" />
        <GridColumn Field="Status" HeaderText="Status" Width="100" />
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders = new() {
        new Order { OrderID = 10248, CustomerName = "Paul", Status = "Archived" },
        new Order { OrderID = 10249, CustomerName = "Linda", Status = "Active" }
    };

    void OnRowDataBound(RowDataBoundEventArgs<Order> args)
    {
        if (args.Data.Status == "Archived")
        {
            args.Row.AddClass("archived-row");
        }
    }
}

.archived-row {
    background-color: #f8d7da;
    color: #721c24;
}

4. Enhanced navigation and routes

.NET 10 brings several improvements to Blazor’s navigation system and route handling, making it more intuitive and developer-friendly. These updates enhance both user experience and development workflow:

Scroll position preservation: NavigationManager.NavigateTo() now retains scroll position during same-page navigations.
Better active link detection: NavLinkMatch.All ignores query strings and fragments, ensuring accurate active link highlighting.
Route syntax highlighting: [Route] now supports syntax highlighting, helping developers visualize and validate route templates easily during development.

5. Reconnect Modal for Blazor

Blazor Server apps rely on a persistent SignalR connection between the client and the server. In earlier versions, handling disconnections required custom logic, adding complexity.

.NET 10 introduces ReconnectModal, a built-in component that automatically detects connection loss, displays a modal to users, and attempts reconnection in the background.

Why it matters for you:

No more manual reconnection handling.
Better user experience with clear feedback during outages.
Easy customization, style the modal or use Syncfusion’s SfDialog for a branded look.

6. Enhanced security sample templates

Security is a critical aspect of modern web development, and .NET 10 strengthens Blazor’s authentication and authorization capabilities with updated sample templates that follow best practices.

What’s included in .NET 10:

OpenID connect (OIDC): Widely used for identity authentication with providers like Azure AD, Google, and Okta.
Microsoft Entra ID (Azure AD): Enterprise-grade identity platform with improved Blazor integration.
Windows authentication : Ideal for intranet apps using Windows credentials.

Additional enhancements:

Support for minimal APIs for streamlined authentication flows.
Azure key vault integration for secure token handling.

7. SSR navigation exception handling in Blazor

Blazor supports multiple rendering modes: Interactive (dynamic navigation after page load) and static server-side rendering (SSR) for pre-rendered content, often used for performance and SEO.

Previously, navigation failures during static SSR, such as invalid routes, could trigger unhandled exceptions, causing the app to crash. This was inconsistent with interactive rendering, where such issues were handled gracefully.

.NET 10 solves this with a new MSBuild property:

Enable it in your .csproj file:

XML

<PropertyGroup>
          ….
         <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
          ….
</PropertyGroup>

Show more lines with this property set to true, Blazor suppresses navigation exceptions during prerendering, ensuring the page continues to render smoothly without breaking due to navigation errors.

8. Blazor WebAssembly diagnostics

As Blazor WebAssembly apps scale, monitoring performance and debugging efficiently becomes critical. .NET 10 introduces powerful diagnostic enhancements to make this easier:

Diagnostic counters: Track real-time runtime metrics such as memory usage, garbage collection activity, and thread behavior. These insights make it easier to spot performance issues before they impact users.
Profiling tools integration: Connect your Blazor WebAssembly app with profiling tools to analyze performance characteristics, identify bottlenecks, and fine-tune resource usage for maximum efficiency.

Why it matters: These enhancements give developers the visibility they need to build faster, more reliable apps, without guesswork.

9. Boot configuration changes

In earlier versions of Blazor WebAssembly, the runtime relied on a separate blazor.boot.json file to store metadata about assemblies, dependencies, and runtime settings. This file was critical for initializing the WebAssembly runtime, but it added an extra step during startup.

With .NET 10, that’s changing. The boot configuration is now embedded directly into dotnet.js, eliminating the need for a separate file. This update streamlines deployment and improves startup performance.

Why this matters:

Simplified deployment: Fewer files to manage means less complexity in builds and CI/CD pipelines.
Reduced startup payload: Consolidating configuration into a single script cuts down HTTP requests during app startup.
Improved performance: Faster initialization with fewer roundtrips to the server.

10. Client-side JavaScript Module fingerprinting

Efficient caching is key to fast, reliable web apps, but it can backfire when browsers serve outdated scripts. To solve this, .NET 10 introduces fingerprinting for client-side JavaScript modules in standalone Blazor WebAssembly apps.

What is fingerprinting?

Fingerprinting appends a unique hash to a file name based on its content. When the file changes, the hash changes too, forcing the browser to fetch the latest version instead of using a stale cached copy.

Why it matters:

Improved caching efficiency: Aggressive caching without risking outdated scripts.
Automatic cache busting: Updated scripts always reach users, no manual intervention needed.
Simplified deployment: No more manual cache invalidation for client-side assets.

11. Declarative state persistence in Blazor

Managing component state across navigation or page reloads has traditionally required manual work in Blazor, using local storage, session storage, or custom services. This added complexity and boilerplate code.

With .NET 10, that’s no longer the case. A new [PersistentState] attribute enables automatic state persistence. Simply decorate properties you want to retain across sessions, navigation events, or reloads, no extra logic required.

Let’s consider a scenario where a product list is loaded from a service and displayed using Syncfusion’s SfListView component. With [PersistentState], the list remains available even after navigation or reloading.

.razor

@page "/products"
@using Syncfusion.Blazor.Lists
@inject IProductService ProductService

@if (ProductList == null)
{
    <p>Loading...</p>
}
else
{
    <SfListView DataSource="@ProductList" HeaderTitle="Products" />
}

@code {
    [PersistentState]
    public List<Product>? ProductList { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ProductList ??= await ProductService.GetProductsAsync();
    }
}

In this example:

The ProductList property is marked with [PersistentState].
Data loads only if it hasn’t been persisted.
Users see the same list even after navigating away or refreshing the page.

Why it matters: This declarative approach eliminates boilerplate and makes state management effortless.

12. Hot Reload for Razor components

One of the most loved productivity features in .NET is Hot Reload, and with .NET 10, it’s even better, especially for Razor components in Blazor apps.

Hot Reload lets you update Razor files ( .razor components or .cshtml ) pages and instantly see changes in the running app, without stopping, rebuilding, or restarting. This dramatically speeds up development, particularly during UI design and layout tweaks, by cutting down build and deploy wait times.

13. Enhanced JavaScript interop

Blazor’s JavaScript interop has always been a powerful bridge between .NET and the browser. With .NET 10, this bridge gets stronger, offering more control and flexibility when working with JavaScript objects and APIs.

In NET 10, Blazor supports:

JavaScript object instantiation via constructors: You can now create new JavaScript objects directly from .NET using constructors.
Property access and mutation: You can read and update properties of JavaScript objects from your Blazor components.

These enhancements make it easier to integrate with complex JavaScript libraries and frameworks, and to build rich, interactive web applications using Blazor.

Suppose you have a JavaScript class defined as follows:

wwwroot/js/jsInterop.js:

window.jsInterop = {
    MyClass: class {
        constructor(name) {
            this.propertyName = name;
        }

        getValue() {
            return this.propertyName;
        }

        setValue(newValue) {
            this.propertyName = newValue;
        }
    }
};

You can now interact with this class from your Blazor component using the following C# code:

var classRef = await JSRuntime.InvokeConstructorAsync("jsInterop.MyClass", "Syncfusion");
var value = await classRef.GetValueAsync<string>("propertyName");
await classRef.SetValueAsync("propertyName", "NewValue");

14. Improved form validation in Blazor

Form validation is critical for building secure, user-friendly apps. In earlier Blazor versions, handling complex forms, especially those with nested models, collections, or custom rules—often meant writing extra logic and boilerplate code. This made scaling validation in enterprise apps challenging.

With .NET 10, Blazor introduces a more robust and scalable validation system that addresses these limitations and adds key enhancements:

Nested object validation: You can now validate deeply nested models without writing custom logic.
Collection item validation: Arrays and lists of objects can be validated individually, ensuring that each item meets the required criteria.
Source generator-based performance: The new validation system uses source generators to compile validation logic at build time, resulting in faster runtime performance and reduced overhead.

To enable the new validation behavior, add the following in Program.cs:

builder.Services.AddValidation();

Getting started with .NET 10 and Syncfusion Blazor

Upgrading your Blazor application to .NET 10 is a straightforward process, and with Syncfusion’s day 0 support, you can take full advantage of the latest features and performance enhancements immediately. This section outlines the essential steps to help you get started with .NET 10 and integrate Syncfusion Blazor components seamlessly.

To upgrade your Syncfusion Blazor app:

Step 1: Ensure that your development environment is equipped with the latest .NET 10 SDK. You can specify the SDK version in your project’s global.json file to maintain consistency across your team or CI/CD pipelines.

.json

{
  "sdk": {
    "version": "10.0.100"
  }
}

This ensures that your project uses the correct SDK version, even if multiple versions are installed on your machine.

Step 2: Ensure your project file (.csproj) targets the new .NET 10 framework. This enables access to all the latest APIs, performance improvements, and Blazor enhancements.

.csproj

<PropertyGroup>
  <TargetFramework>net10.0</TargetFramework>
  …
</PropertyGroup>

You can also include additional properties such as nullable reference types, implicit usings, and Razor component settings as needed.

Step 3: Make sure all your NuGet dependencies are compatible with .NET 10. Specifically:

Update all Microsoft.AspNetCore.* packages to their latest versions.
Install or upgrade Syncfusion Blazor packages to the latest release that supports .NET 10.

You can do this via the NuGet Package Manager in Visual Studio or by running the following command in the terminal:

dotnet add package Syncfusion.Blazor.Grid --version [latest-version]

Visit Syncfusion’s NuGet feed to find the latest version compatible with .NET 10.

Conclusion

.NET 10 is a significant milestone in the evolution of Blazor and the broader ASP.NET Core ecosystem. With its long-term support (LTS) status, this release brings a host of performance enhancements, developer productivity improvements, and advanced features that empower teams to build modern, scalable, and responsive web applications.

Syncfusion’s day 1 support for .NET 10 ensures that developers can at once take advantage of these innovations without waiting for part updates or compatibility fixes. Whether you’re building with Blazor Server or Blazor WebAssembly, Syncfusion Blazor components are fully optimized to leverage the latest capabilities introduced in .NET 10.

From faster load times and smarter navigation to improved diagnostics, state persistence, and form validation, the combination of .NET 10 and Syncfusion Blazor offers a robust foundation for enterprise-grade web development.

Refer to the complete samples in our GitHub demos. And refer to the getting started to kick start Blazor webapp development with Blazor components live demo.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

DEV Community