Is Blazor the Future of Everything Web?

In this article we’ll learn how .NET 8 has changed Blazor’s position in the market with features that have modernized and future-proofed the framework for years to come.

This blog article was published as part of the C# Advent 2023. This annual event inspires authors and content creators to produce 50 new pieces of content for the .NET community just in time for the holiday season.

Saying that Blazor is the future of everything web is a bold statement. Without some facts to back up the title, it might just sound like another clickbait headline. However, a lot of important things are happening with .NET 8 that change the course of Blazor’s future. With the .NET 8 release, a collection of new features take Blazor from “niche .NET framework” to “modern web framework—and beyond.”

Full-Stack Web UI with Blazor

The power and performance of ASP.NET Core’s server combined with Blazor’s features and .NET ecosystem make a prime candidate for new full-stack web application projects. Unlike most web frameworks, Blazor is fully integrated with the server framework, and it uses one build system and one language. The Blazor framework basic feature set includes:

• Powerful reusable component model
• Easily handle UI events
• Two-way data binding
• Built-in components for forms and validation
• Display large data sets with virtualization
• Build installable web apps and support offline scenarios
• Rich tooling experience with Hot Reload
• Write C#, interop with JavaScript as needed

Blazor has recently expanded beyond the basics by leveraging its server strengths and incorporating the latest web framework trends.

Web Framework Trends

Web technology has evolved over the last 30 something years from static HTML pages to highly interactive applications that update in real time. Throughout this evolution, the underlying architecture has changed as well. What started as a something "easy to learn, dynamic and powerful" now has a staggering learning curve and equally staggering demand on resources.

Currently we are in a state of transition back to simplification. One specific example is the renewed interest in server-side HTML rendering. This can be seen with popular JavaScript frameworks such as Angular, React, Next.js and Svelte. Blazor has also embraced its server heritage in .NET 8 and included some future-proofing as well.

Blazor’s first release included server and client interactivity. Later, server-side pre-rendering was added to improve performance of client apps. Server rendering is important to web technologies like Blazor because it provides a better user experience, faster loading times and search engine optimization (SEO). The trend to transition web frameworks back to server rendering is an interesting one, considering ASP.NET has been efficiently using server rendering since 2002.

The trend to transition web frameworks back to server rendering is an interesting one, considering ASP.NET has been efficiently using server rendering since 2002.

With .NET 8, Blazor has transitioned to a Progressive Server Side Rendering strategy. This strategy foregoes interactivity by default and instead statically renders pages. Static rendering does not require resources such as Web Assembly (WASM) or Web Sockets (SignalR) making it faster and more efficient. Static webpages are ideal for marketing pages, displaying read-only data and simple form posts.

As we learned with the evolution of web technologies, while static server rendering is minimal and convenient, it has limitations. When using static rendering with data-driven pages, long-running background processes can potentially cause delays displaying the page. Typically, a developer would choose a client-side framework in this scenario to request individual components piece-by-piece instead of waiting for the server to construct the entire page.

Streaming Rendering

For this scenario, Blazor has included server streaming rendering. Streaming rendering allows the server to statically render a page with placeholder content or waiting indicators. The web request is left open while the server completes its task(s). Once the process is complete, placeholders are patched in with server rendered content. With streaming rendering a page benefits from the component initialization lifecycle of Blazor, without using WASM or Web Sockets.

The progressive strategy provides a gradual transition from static server rendering, to interactive SPA application. It takes the ease of classic web development and adds a modern perspective, and serves as a bridge between server rendering and interactive SPA application.

SPA Applications

Single-page applications (SPAs) have dominated interactive web applications in recent history. The goal of a SPA is to provide interactivity in the most performant way possible. SPAs minimize rendering through DOM update techniques and typically utilize client-side resources.

With Blazor, developers can build SPAs by opting into three interactive strategies: Interactive Server, Interactive WebAssembly or Interactive Auto. All three interactive modes use Enhanced Navigation.

Enhanced Navigation

Enhanced navigation is utilized by all three interactive modes in .NET 8. This feature in Blazor intercepts the request and executes a fetch request in its place. The response content is then integrated into the page’s DOM by Blazor. The enhanced navigation and form handling of Blazor eliminate the necessity for a complete page refresh, preserving more of the page’s state. This typically results in quicker page loading and maintains the user’s scroll position on the page.

Interactive WebAssembly

Client-side rendering (CSR) allows for interactive rendering of the component on the client side through Blazor WebAssembly. When the WebAssembly component is first rendered, the .NET runtime and application bundle are downloaded and stored in cache. It’s necessary for components that use CSR to be constructed from a distinct client project, which establishes the Blazor WebAssembly host.

Interactive Server

Interactive server-side rendering, also known as interactive SSR, utilizes Blazor Server to render components in an interactive manner from the server. It manages user interactions through a live connection with the browser. The circuit connection comes into play when the Server component is rendered.

Interactive Automatic

Automatic applications run on both the client and server, including individual components which are can be completely unaware of the interactivity context. With automatic applications, a webpage is first generated on the server and sent to the client. After the initial view is rendered, additional resources are downloaded in the background, and subsequent actions are handled client-side.

Just like server rendering, this concept isn’t new, similar concepts have been implemented with frameworks like Next.js, Meteor.js and even some variations of ASP.NET WebForms. What sets Blazor apart is an attempt to modernize these ideas using the .NET stack while utilizing web standard technologies.

Learn more about Blazor’s render modes from the comprehensive article Getting Started with Blazor’s New Render Modes in .NET 8 .

A Modern Twist

Blazor’s approach to the web is a modern twist on current and past development trends. Blazor is a full-stack web UI framework that utilizes .NET and C# to achieve interactivity and rendering from both the client and server. The ability to rapidly and efficiently serve content, while automatically transitioning interactivity modes sets Blazor apart from other web solutions. The Blazor framework doesn’t limit itself to traditional “web applications” either, as developers can choose from a variety of cross-platform options as well.

Progressive Web Apps and Cross-Platform Blazor

Blazor is not limited to the web browser, nor is a server required use the framework. For web developers looking for solutions to extend their skills and capabilities, Blazor is a solid candidate. When it comes to cross-platform application development, Blazor apps can take advantage of the web ecosystem through Progressive Web Application (PWA) features, or the .NET MAUI stack via the Blazor Hybrid approach. Both application types rely on standards based architectures and solve the same problem through different approaches. Each solution has its own unique benefits, and the choice depends on specific needs.

Progressive Web Applications with Blazor WebAssembly

PWAs are built with web standard technologies including HTML, CSS, JavaScript and WebAssembly, which work on a standards-compliant browser. PWA features are supported to varying degrees on both desktop and mobile.

Once a PWA is installed, the browser’s address bar and buttons (chrome) are stripped away. Just as a native application, the PWA will have an icon and interact natively with the Windows task bar. A PWA gains an important feature that further enhance the user experience, Service workers. Service workers are part of the PWA specification that is a type of web worker. Service workers are JavaScript code that runs separately from the main browser thread, which can provide an offline mode (intercepting network requests, caching or retrieving resources from the cache) and deliver push messages.

Blazor applications that are written using Interactive WebAssembly, and client-side rendering can easily take advantage of PWA capabilities. A Blazor Progressive Web Application (PWA) is a type of SPA that leverages modern browser APIs and features to mimic the behavior of a native applications. Blazor WebAssembly (WASM) aligns itself well with PWA functionality because it doesn’t require a server to operate, thus supports offline capabilities required. Blazor WASM includes access to the APIs necessary for the following functionalities:

• Operating offline and loading immediately, regardless of network speed
• Functioning in its own application window, not confined to a browser window
• Initiating from the start menu, dock or home screen of the host’s operating system
• Receiving push notifications from a backend server, even when the user is not actively using the application
• Updating automatically in the background

Additional standardized browser APIs can perform tasks such as: geolocation, notifications, payments, bluetooth, NFC and much more. The collection of browser APIs closely resembles those available on native mobile and desktop platforms, with some exceptions. For true platform API access, developers can choose Blazor Hybrid with .NET MAUI.

Blazor Hybrid with .NET MAUI

Blazor Hybrid is an exciting new development pattern from Microsoft that allows developers to create desktop and mobile applications using the Blazor framework and platform native .NET apps. Because Blazor Hybrid apps use HTML, CSS, C# and JavaScript, there is ample opportunity to share a common code base between a Blazor web client, desktop and mobile app. In addition, existing Blazor applications can be configured to work with .NET MAUI adding desktop and mobile clients.

When Blazor was introduced for the web, one of the primary goals was to enable developer to build web application UIs using .NET. With Blazor Hybrid, the primary goal has shifted slightly by extending the capabilities of .NET developers beyond the web into the desktop and mobile space while reusing HTML and CSS skills in addition to .NET.

The Blazor Hybrid stack with MAUI offers some unique abilities that are not available with standard Blazor web development or PWAs. When using WebAssembly, the .NET runtime is operating in interpreted mode and is not as performant as .NET running natively. While advances were made in .NET 8 to make Blazor WASM more performant, it remains a tradeoff when choosing WebAssembly.

Similarly, Blazor Server has tradeoffs as well. While Blazor Server gains the ability to run .NET natively on the server, it requires a constant connection to the client and the performance is indicative to the client’s latency.

Blazor Hybrid has a unique position in the Blazor ecosystem where it can eliminate these tradeoffs by running the .NET runtime supplied by the native platform. Unlike Blazor WASM, Blazor Hybrid does not use interpreted mode and performs as a device-native app. Since Blazor Hybrid apps are processed locally the tradeoffs of Blazor Server are also circumvented. While there are nuances to each platform’s execution of the .NET runtime, Blazor Hybrid’s execution is “closer to the metal” than that of WebAssembly.

Blazor Hybrid has a unique position in the Blazor ecosystem where it can eliminate these tradeoffs by running the .NET runtime supplied by the native platform.

In addition to performance, Blazor Hybrid also has the greatest potential for sharing a single codebase while targeting cross-platform development. This includes the ability to publish applications to all the major app stores with addition to receiving a mobile home screen icon or desktop icon. Because Blazor Hybrid with .NET MAUI compiles to native Android bianaries, it can go beyond the typical “mobile device” and works in exciting new spaces.

Blazor with Augmented Reality

One aspect of Blazor PWA and Blazor Hybrid applications is the emerging Augmented Reality (AR) space. While Blazor doesn’t have an immediate connection with spatial computing in AR, it does have potential for 2D or flat applications. Flat applications aren’t immersive apps themselves but run within an immersive AR environment on the platform’s operating system. The Meta Quest 3 allows flat applications on its platform in the form of PWAs or Android binaries. Popular web applications are starting to enter the platform as flat apps—examples include: Microsoft Office, Instagram and Netflix.

Blazor apps can be published to the Quest platform as a PWA or Blazor Hybrid app. Both options require very little additional configuration (if any) to work. Deploying a PWA application on Quest requires the app to be installable via the store, unlike Windows or Android that allow PWA installation directly from the browser alone. To create a PWA for the Quest store, a Meta PWA command line (CLI) tool is used to package the app as an android binary. The packaged app is then submitted to the Quest app store.

When using .NET MAUI, the process is surprisingly simple. When working with Blazor Hybrid with .NET MAUI, simply plug in a developer-enabled Quest 3. The Quest device will now be displayed in Visual Studio’s Start menu where it can be deployed, debugged and tested.

Developing Blazor applications within the Quest environment is a tightly integrated experience. With a Blazor app running in the Quest, the physical desktop can be viewed through the device; however, this isn’t the best experience. Instead, a remote desktop viewer on the Quest can be used to access the desktop in AR. Both the Blazor app and desktop can be seen side by side in AR.

Furthermore, the Blazor app’s WebView can be debugged by opening the Chrome browser on the desktop and navigating to chrome://inspect. From the Chrome debugger, you can access the DOM and console as if you were debugging a typical webpage.

Blazor and the .NET ecosystem are versatile and truly portable. The ability to reach new platforms like AR while remaining productive is promising.

Productivity

The .NET and Blazor ecosystems have matured to offer a great deal of productivity tools such as: feature rich templates, integration with cloud architecture, testing libraries, UI component libraries, scaffolding tools and an interactive online REPL.

Getting Started with Blazor

Getting started with Blazor is easier than ever with the provided templates. In addition to the top-level choices, each template has a set of options that allow developers to tailor the scaffolded solution to fit their needs. The templates included cover the following scenarios: Blazor Web App, Blazor WebAssembly Standalone App and PWA (option).

.NET 8 introduced a new Blazor project template: the Blazor Web App template. The new template provides a single starting point for using Blazor to build any style of web UI. The template combines the strengths of the existing Blazor Server and Blazor WebAssembly hosting models with the new Blazor capabilities added in .NET 8: static server-side rendering (static SSR), 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.

For scenarios that don’t require a .NET server, no server or PWA, the Blazor WebAssembly Standalone App will scaffold a solution without server resources. This is ideal when working with Web APIs that are provided by a third party or need to run completely client-side. When developing a PWA, using this template along with checking the respective Progressive Web App option will generate all of the necessary resources for a PWA.

In addition to the Blazor specific templates, a new Microservices template is now in preview.

.NET Aspire and Micro Architectures

.NET Aspire is an opinionated, cloud-ready stack for building observable, production-ready, distributed applications. .NET Aspire is delivered through a collection of NuGet packages that handle specific cloud-native concerns. Cloud-native apps often consist of small, interconnected pieces or microservices rather than a single, monolithic code base. Cloud-native apps generally consume a large number of services, such as databases, messaging and caching.

A .NET Aspire application uses an observable orchestrator pattern to plug-in different micro-architectures to create a full solution. Using the Aspire template, a cloud-ready solution can be generated with a Blazor web frontend already configured as part of the application. In addition, the Aspire application itself has a built-in dashboard which launches with the application. The dashboard monitors projects, containers, executable, logs, projects and traces. Most importantly, Aspire dashboard application itself is a Blazor application. This shows Microsoft’s willingness to support the Blazor platform and further its development.

Telerik UI for Blazor

Being productive with any application stack requires a great user interface (UI) tool set. Blazor can quickly be extended with 110+ truly native, easy-to-customize Blazor components using the Progress Telerik UI for Blazor library. Telerik UI for Blazor cuts development costs significantly by removing the need to worry about data handling, performance, UX, design, globalization, localization and most importantly accessibility.

Telerik UI for Blazor is a commercial product, which means you’ll have exceptional support from the developers who work directly on the library. Document processing resources are also included with the library, so reading and writing .docx, .pdf and other popular formats is a breeze.

The Telerik Visual Studio and VS Code extensions provide scaffolding tools for increased developer productivity. They allow you to quickly add component pages to your application and setup the parameters of the component through an wizard interface.

Interactive Online Blazor REPL

One aspect of web programming that has accelerated the platform and reduced the learning curve is the ability to edit webpages in real time. Even though Blazor uses .NET technologies and a compiled language, that doesn’t mean there’s a high barrier to entry.

The Progress Telerik REPL for Blazor (Blazor REPL) is a fast and easy way to write Blazor code in the browser without installing anything. Blazor REPL is a no-cost playground for creating, running, saving and sharing code snippets and examples from the comfort of your browser. It’s a great tool for getting acquainted with Blazor code, pair programming or simply sharing ideas.

The panel below is an interactive Blazor snippet using Blazor REPL that can be modified in real time.

Rendering Without ASP.NET Core

Blazor’s component model, aka Razor Components, no longer requires a browser, server or HTTP request to be rendered. Razor components can be rendered as HTML directly to a string or stream independently of the ASP.NET Core hosting environment. This is convenient for scenarios where you want to generate HTML fragments, such as for generating email content, generating static site content or building a content template engine.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using ConsoleApp1;

IServiceCollection services = new ServiceCollection();
services.AddLogging();

IServiceProvider serviceProvider = services.BuildServiceProvider();
ILoggerFactory loggerFactory = serviceProvider.GetRequiredService<ILoggerFactory>();

await using var htmlRenderer = new HtmlRenderer(serviceProvider, loggerFactory);

var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
    var dictionary = new Dictionary<string, object?>
    {
        { "Message", "Hello from the Render Message component!" }
    };

    var parameters = ParameterView.FromDictionary(dictionary);
    var output = await htmlRenderer.RenderComponentAsync<RenderMessage>(parameters);

    return output.ToHtmlString();
});

Console.WriteLine(html);

The preceding code snippet shows how to render a Razor component from a console application. In this code, an HtmlRenderer object is created. The HtmlRenderer object incorporates the familiar service provider pattern used for dependency injection in .NET. It also uses a standard .NET logger factory as a logging mechanism for the render process. With the HtmlRenderer constructed, the RenderComponentAsync method is called emitting the completed HTML string. The resulting HTML string can be used in a wide array of application scenarios.

Blazor’s versatility to render beyond the browser will help build even a larger ecosystem of Blazor based tools over the next few years.

Conclusion

The Blazor framework has evolved from “yet another web framework” into so much more. With the release of .NET 8, Blazor has leveraged its most valuable asset, the ASP.NET Core server. The introduction of modern web trends, like static server rendering and automatic interactivity modes, elevates Blazor to a new level.

While Blazor technology has strengthened, it has also expanded into new channels through PWA, Blazor Hybrid with .NET MAUI and even to Augmented Reality. As Blazor becomes more useful, it also improves on productivity with an expansive ecosystem of templates and tools that encompass line-of-business applications as well as microservice architectures. Despite its early association with WebAssembly, Blazor goes well beyond the browser and server by rendering independently for nearly any custom solution.

If you’re a .NET developer, Blazor is truly “the future of everything web.” If you’re not a .NET developer, it might just be time to give it a try.