What’s New in Blazor with .NET8

Blazor is a modern web UI framework that allows developers to build interactive web applications using C# and HTML. Blazor can run on the server, on the client using WebAssembly, or both. Blazor also supports a variety of hosting models, such as static web apps, progressive web apps, hybrid apps, and desktop apps.

With the release of .NET 8 in November 2023, Blazor has become a full-stack web UI framework that can render content at either the component or page level with different rendering modes. In this blog post, we will explore some of the new features and improvements that Blazor offers in .NET 8.

Blazor Web App Template

One of the major changes in Blazor with .NET 8 is the introduction of a new Blazor project template: the Blazor Web App template. This template provides a single starting point for using Blazor components to build any style of web UI, regardless of the hosting model or the rendering mode. The template combines the strengths of the existing Blazor Server and Blazor WebAssembly hosting models with the new Blazor capabilities added in .NET 8, such as static server rendering, streaming rendering, enhanced navigation and form handling, and the ability to add interactivity using either Blazor Server or Blazor WebAssembly on a per-component basis.

The Blazor Web App template also simplifies the project structure and the tooling experience for Blazor developers. As part of unifying the various Blazor hosting models into a single model in .NET 8, the Blazor Server template and the ASP.NET Core Hosted option from the Blazor WebAssembly template have been removed1. Both of these scenarios are represented by options when using the Blazor Web App template. The template also supports hot reload, hot restart, and debugging for both server-side and client-side code.

To create a new Blazor Web App project, you can use the following command:

dotnet new blazorwebapp -o BlazorWebApp

Alternatively, you can use Visual Studio or Visual Studio Code to create a new Blazor Web App project from the template.

Blazor Rendering Modes

Another major change in Blazor with .NET 8 is the support for different rendering modes that can be used to optimize the performance and user experience of Blazor web apps1. The rendering modes are:

Static server rendering: This mode generates static HTML for the Blazor components or pages at build time or on the server. This mode is ideal for scenarios where the content is mostly static and does not require interactivity, such as landing pages, blogs, or documentation sites. Static server rendering can improve the SEO, accessibility, and initial load time of Blazor web apps.

Interactive server rendering: This mode renders the Blazor components or pages on the server and establishes a real-time connection with the browser using SignalR. This mode is ideal for scenarios where the content is dynamic and requires interactivity, such as dashboards, forms, or chat apps. Interactive server rendering can leverage the full capabilities of the server, such as access to databases, APIs, or file systems, without exposing them to the client.

Interactive WebAssembly rendering: This mode renders the Blazor components or pages on the client using WebAssembly. This mode is ideal for scenarios where the content is rich and requires high performance, such as games, animations, or offline apps. Interactive WebAssembly rendering can run the Blazor web app entirely on the client, without requiring a server connection, and take advantage of the native capabilities of the browser, such as local storage, geolocation, or camera.

Interactive Auto rendering: This mode automatically chooses the best rendering mode for each Blazor component or page based on the availability of the server and the client. This mode is ideal for scenarios where the content is mixed and requires both static and dynamic rendering, such as e-commerce, social media, or news sites. Interactive Auto rendering can provide the fastest app startup experience by initially using the server-side ASP.NET Core runtime for content rendering and interactivity, and then switching to the client-side .NET WebAssembly runtime for subsequent rendering and interactivity after the Blazor bundle is downloaded and the WebAssembly runtime activates.

To specify the rendering mode for a Blazor component or page, you can use the @render directive in the Razor file. For example, to render a component using the Interactive Auto mode, you can use the following code:

@render InteractiveAuto

<h1>Hello, world!</h1>

Alternatively, you can use the RenderMode property of the Component attribute in the C# file. For example, to render a component using the Static Server mode, you can use the following code:

[Component(RenderMode = RenderMode.StaticServer)]
public partial class HelloWorld
{
    // ...
}

By default, Blazor components and pages use the Interactive Auto rendering mode

Blazor Improvements

In addition to the new Blazor Web App template and the new Blazor rendering modes, .NET 8 also introduces many other improvements and enhancements for Blazor, such as:

Built-in support for additional types: The System.Text.Json serializer has built-in support for the following additional types in .NET 8:

• Half, Int128, and UInt128 numeric types.
• Memory and ReadOnlyMemory values.

Source generator enhancements: The System.Text.Json source generator has been improved to support serializing types with required and init properties, customizing the naming policies, and generating more diagnostics.

New JsonNode API methods: The JsonNode API has new methods for creating, modifying, and querying JSON data in a dynamic and intuitive way.

Streaming deserialization APIs: The System.Text.Json serializer has new APIs for deserializing JSON data from a stream in an asynchronous and incremental manner.

New JS initializers for Blazor Web Apps: Blazor Web Apps have new JS initializers that can be used to execute custom JavaScript code before or after the Blazor web app starts.

Enhanced navigation and form handling: Blazor Web Apps have improved support for handling navigation events, such as OnNavigateTo and OnNavigateFrom, and form submission events, such as OnValidSubmit and OnInvalidSubmit.

New Blazor components: Blazor Web Apps have new built-in components for common web UI scenarios, such as Pager, Rating, TreeView, Virtualize, and Window.

New Blazor component libraries: Blazor Web Apps have new component libraries that provide additional functionality and integrations, such as Blazor.Analytics, Blazor.FluentUI, Blazor.GoogleMaps, Blazor.Material, and Blazor.Stripe.