A Brief Introduction to Blazor United

Blazor United revolves around unifying the Blazor technologies to simplify the development of client-side and server-side web applications. It harnesses the power of Blazor ASP.NET Core, and with the use of Razor components, provides a seamless experience for developers. Ultimately, it aims to simplify the overall web development process by offering a single, unified framework for all tasks.

Blazor United can be seen as a movement towards combining the powers of Blazor technologies within the .NET ecosystem. Let’s take a moment to understand the fundamentals of Blazor United, and how it is changing the game for web development.

  • Server-side rendering with Blazor components
  • Streaming rendering
  • Enhanced navigation
  • Client-side interactivity on a per component or a per-page level
  • Ability to mix and match which components render mode that you want at runtime.

This will all be from within a single project that you can have. Islands of interactivity based on either Blazor server or Blazor WebAssembly alongside server-side rendered content. You can easily switch the rendering modes and even mix them on the same page.

A quick word on naming

As us developers know, naming is hard. This isn't a new framework. This isn't even a new hosting model for Blazor. Instead, it's actually just a collection of new Blazor features and enhancements, starting from .Net 8, that make Blazor a true full-stack WebUI framework.

To avoid confusing people into thinking that Microsoft are building something completely new and completely different, Microsoft decided to actually move away from the ‘Blazor United’ naming and instead just focus on the actual features being added to Blazor, essentially Full-stack Blazor development.

Server-side rendering

Server-side rendering means generating HTML from the server in response to a request. In the case of Blazor, what this means is that we will route requests to a Blazor component, which is acting as an endpoint. That component renders the HTML and it gets sent down in the response. Now in this model there's no WebAssembly, there's no websocket connections involved you're just getting plain HTML rendered to the browser in response to requests. This is different than Blazor server. In Blazor Server, you actually have a persistent connection and states being managed on the servers so that you get that full interactive experience. In traditional server-side rendering, the connection only lives as long as the requests and the app is typically stateless. That's what we mean when we're talking about traditional server-side rendering. We're not talking about the Blazor server model in this case.

Streaming Rendering

Streaming rendering allows you to do is if you have pages that have long-running async tasks, if you're querying the database or you're making an API call from the server and you don't want to have to wait for those tasks to complete, to get pixels down to the client, that's what streaming rendering enables you to do. You can render the page fully with some placeholder content. For any of the places where you're waiting on those long-running async tasks. Then when the task completes the updated content.

As an example, we could show a loading animation for a page while doing long-running tasks like initialising or fetching data from a database. Then when the database query has completed, the page can render again, with the same response stream for the original request being used, and then client-side logic helpers can apply the changes to the live DOM. You'd get pixels on the screen really fast and your app feels more responsive.

To enable streaming rendering, you add a Blazor script to your layout, provided by the framework. Once turned on, you will have enabled streaming rendering support. You don't always want streaming rendering, it can cause content to shift around. It's something you really need to design for in your app so you opt into it.

The important part to takeaway is that the loading animation, and then the data rendering, are all part of the one request. There's no Blazor servers circuits happening there, there's no WebAssembly involved. This is still fundamentally a stateless application doing server-side rendering. It's just you get that better and more responsive user experience. That's streaming rendering.

The Role of Blazor United in Web Development

By encouraging the use of .NET Blazor technologies across the board, Blazor United is enabling seamless integration between client-side and server-side development. This results in more maintainable codebases, improved productivity for developers, and faster web applications.

The .Net 8 release opens up the benefits of combining the server and client into a single consistent programming model based on Blazor. Modern web apps today use a variety of approaches to handle their WebUI needs. Like maybe your homepage or your blog. That's best handled with server-side rendering so that it loads fast and is easily indexed. In.Net 8 today we have support for server-side rendering with MVC and Razor pages, but for other parts of your app, maybe you need more elaborate functionality, which needs to be responsive. That part is probably best run from the client using client-side rendering. For that in.Net we of course have Blazor. But in order to use these two different approaches to WebUI together in a .NET App, you currently have to mix different frameworks. This means being able to use these two things together. Microsoft is combining the strengths of the server and client into a single consistent programming model based on Blazor, so that you can build full-stack WebUI using Blazor components.

The Assemblysoft advantage for Blazor United Development

At Assemblysoft we have invested heavily in specialising in Blazor Server, Blazor WebAssembly, .NET MAUI Blazor Hybrid and now Fullstack Blazor (AKA Blazor United).  As Fullstack Blazor development is a relatively new offering in terms of maturity, there remain a number of challenges that are not readily solved by existing libraries and documentation. As our development team at Assemblysoft have already completed a number of applications that are in production, we have already encountered and solved these challenges, saving you time and money as we leverage our deep experience.