Blazor, the web framework developed by Microsoft, has undergone significant improvements with the release of .NET 8. The introduction of different rendering modes is one of the significant enhancements that provide developers with greater flexibility in deciding how and where their components are executed.

In this article, we will delve into the rendering modes available in .NET 8 and explore their strengths, weaknesses, and potential use cases.

How It Started

Before the .NET 8 release, developers primarily worked with three hosting models in Blazor: Blazor Server, Blazor WebAssembly, and Blazor Hybrid.

Blazor Server is a hosting model where the components of a Blazor application are executed on the server, establishing communication with the browser via a persistent socket connection. This hosting model relies on SignalR – a real-time communication library – which facilitates the ongoing interaction between the server and the client (browser).

It enables real-time updates and dynamic responsiveness, making the Blazor Server hosting model well-suited for applications with high interactivity requirements or those necessitating real-time communication.

Blazor WebAssembly involves downloading the client-side aspect of an application to the browser, where it runs independently. Blazor WebAssembly brings the .NET framework to the client side, and the whole UI is rendered natively in the browser.

This hosting model leverages WebAssembly, a binary instruction format that enables high-performance code execution in web browsers. Downloading and executing components in the browser reduces the need for constant server interactions.

Blazor Hybrid combines web technologies with native client applications. In this hosting model, Razor components are rendered natively within the application environment, allowing for the reuse of components across mobile, desktop, and web platforms.

How It's Going: Blazor's New Render Modes in .NET 8

.NET 8 introduces significant changes in render modes. New options allow developers to have precise control over the execution of components.

In conjunction with this release, Blazor expanded its capabilities, evolving into a full-stack web UI framework. This enhancement provides developers with the flexibility to isolate component workloads to support both static and interactive content scenarios.

Blazor in .NET 8 introduces Static Server-Side Rendering (SSR) for static content rendering as well as three rendering modes for interactive scenarios, each with a specific purpose:

– Static Server-Side Rendering (SSR):

1. Generates static HTML on the server.
2. Perfect for rendering static content which has no interactivity requirement such as content on public websites.

– Interactive Server:

1. Produces interactive components with prerendering on the server.
2. Utilizes the Blazor Server hosting model for real-time interactivity

– Interactive WebAssembly:

1. Produces interactive components with prerendering on the server.
2. Utilizes the Blazor WebAssembly hosting model for real-time interactivity

– Interactive Auto:

1. Produces interactive components with prerendering on the server
2. Utilizes the Blazor Server hosting model for initial component rendering and downloads the application to the browser in parallel.
3. On subsequent requests utilizes the Blazor WebAssembly hosting model for real-time interactivity

An interesting point to note is all SSR render modes automatically prerender content, enhancing performance and user experience. 

An interesting point to note is all SSR render modes automatically prerender content, enhancing performance and user experience.

Why Are These Changes So Significant?

The changes introduced with the release of .NET 8 bring significant advancements to Blazor, and such evolution is noteworthy for several reasons:

• The release of .NET 8 elevates Blazor to a feature-rich full-stack web UI framework. This means developers can now create applications that support both static and interactive content scenarios.
• The framework supports various rendering approaches we've mentioned above. The introduction of Interactive Auto rendering is particularly significant, allowing the initial use of Blazor Server for content rendering and interactivity, followed by subsequent rendering and interactivity on the client using Blazor WebAssembly. This approach optimizes both app startup experience as well as scalability performance.
• The interactive render modes automatically incorporate the prerendering of content by default. It ensures a seamless user experience by preparing and rendering content in advance, reducing load times, and enhancing overall interactivity.
• A notable addition is the capability for streaming rendering, which enables the application to deliver content updates on the response stream, improving user experience for pages engaged in long-running asynchronous tasks.

Want to learn more about the improvements the .NET 8 release brought? We’ll be happy to advise you on this. Just contact us!

Now, let's move to the particularities of the introduced render modes.

Static Server-Side Rendering (SSR)

When it comes to rendering components in a Blazor application in .NET 8, the default mode is Static Server-Side Rendering. This mode is the default setting for new projects created using the .NET 8 Blazor Web project template, providing a seamless and efficient way to showcase information without the need for extensive user interactivity.

Static SSR advantages

There are four main benefits of this rendering approach.

• Simplicity. You don't have to deal with complex state management or long-running components.
• Lower client-side resource usage. As the server handles the rendering, the client-side resources are minimized, making it suitable for scenarios where clients may have limited processing power or bandwidth.
• Easier debugging. Debugging can be more straightforward in static rendering since the initial rendering logic and component behavior are confined to the server. This can simplify the identification and resolution of issues.
• It is intuitive and comfortable for those who have worked with Razor Pages or MVC.

Static SSR pitfalls

It is also crucial to consider potential disadvantages in the context of your specific application requirements. Let's take a look at the most important trade-offs.

• Interactivity is limited. Static SSR is not well-suited for highly interactive components that require frequent updates or real-time user interactions. This limitation can impact the development of dynamic web applications.

Use cases

Static server-side rendering is a good choice for scenarios where the primary goal is to display information. This can be landing pages, online product displays, and non-interactive charts. Also, thanks to its simplicity and conciseness, this approach may be suitable for applications that deal with a large amount of static data.

Interactive Server Rendering

Interactive Server rendering processes and renders components on the server using the Blazor Server hosting model approach. This involves the use of SignalR for interactivity, facilitating real-time communication between the server and browser.

Advantages of Interactive Server

• Easy transition from Static rendering to Interactive Server mode.
• No need for a separate API or Service Layer, as components can directly interact with business logic and data on the server.

Pitfalls of Interactive SSR

• Each browser connection consumes memory on the server to maintain state for the interactive connection
• Every interaction relies on the web socket connection, potentially increasing server load.
• A broken connection between the browser and server results in an error message and loss of application state

Use cases

Interactive Server is good option in following cases:

• Line-of-business applications that require dynamic and real-time updates. These could be collaboration platforms where instant changes and responses are crucial.
• Interactive reports and dashboards. Applications featuring interactive reports, charts, and dashboards can benefit significantly from interactive server rendering. Users can seamlessly manipulate data, apply filters, and see real-time updates, enhancing the analytical capabilities of the application.
• Data-intensive grids and tables. This mode ensures a smooth user experience when dealing with data-intensive grids or tables that involve sorting, filtering, or paging. It allows efficient handling of large datasets without compromising on performance.
• Applications featuring live feeds, notifications, or messaging systems. Users receive instant updates without the need for manual refresh, enhancing the application's overall responsiveness.
• Dynamic forms and surveys, where the UI needs to adapt based on user input. This is valuable in scenarios where form elements or survey questions may dynamically appear or disappear.

Interactive WebAssembly

In this case, the application is downloaded to the client's browser during the initial rendering using the Blazor WebAssembly hosting model. This approach renders content and handles interactivity natively within the browser.

Advantages of Interactive WebAssembly

• Interactive WebAssembly enables fully interactive components, providing a seamless and responsive user experience directly within the client's browser.
• By executing components in the browser, it offloads processing power to the client, reducing the demand on server resources.
• WebAssembly's ability to run in semi-disconnected mode allows applications to operate in the browser without constant server connections, offering flexibility for various use cases.
• Compared to server-dependent interactions, client-side rendering results in a smoother and more immediate user experience, as actions happen locally in the browser.
• Components can run offline, leveraging local browser execution, though a network connection is still required for fetching or updating server data.

Pitfalls of Interactive WebAssembly

• The .NET runtime and app content's significant initial download may pose a challenge for certain applications, potentially leading to delays in the initial loading of pages.
• As the application runs in the browser, an API is necessary to handle interactions with server resources, eliminating the possibility of direct server connections.
• Managing components in a separate project introduces complexity to the application structure, potentially requiring a shared project for models shared between server and client.
• While components can run offline, a network connection remains essential for fetching or updating data on the server.

Use cases

This mode can be beneficial for such cases:

• Applications that require real-time user interactivity (enables dynamic updates and immediate responses to user actions)
• Products with complex and feature-rich user interfaces (allows for the efficient execution of complex logic on the client-side).
• Apps that need to operate offline or in low-connectivity environments.
• Products that involve complex data manipulation and processing on the client side.
• Web-based games and multimedia applications often require a high degree of interactivity and performance.
• Applications where user responsiveness is critical, such as e-commerce platforms.

Still have questions about Interactive WebAssembly? We will be happy to answer them. Let’s talk!

Interactive Auto Rendering

Interactive Auto Rendering dynamically adapts to render components at runtime, offering a flexible and adaptive approach. Initially, components undergo interactive rendering on the server side using the Blazor Server hosting model. In parallel, the .NET runtime and app bundle are seamlessly downloaded in the background so that they can be executed using Blazor WebAssembly on subsequent requests.

Advantages of Interactive Auto Rendering

• The mode kicks off with server-side rendering, ensuring a swift initial page load – a hallmark advantage of Blazor Server.
• Auto Render Mode seamlessly transitions to client-side rendering via Blazor WebAssembly. This shift occurs once the necessary WebAssembly resources are downloaded in the background.
• By transitioning to client-side rendering after the initial load, Auto Render Mode optimizes the performance of Blazor applications.

Pitfalls of Interactive Auto Rendering

The transition from Blazor Server to Blazor WebAssembly requires a server-side request – it does happen within the same request. This means that if a user is primarily accessing an interactive component and does not navigate away to a different page within the application, they will remain bound to the Blazor Server render mode and will not transition to the Blazor WebAssembly render mode.

Once Auto Render Mode decides on the rendering approach (server-side or client-side), it adheres to that decision for the lifetime of the component. Dynamic switching between render modes based on changing conditions during a user session is not supported.

Use cases

This mode blends server-side and client-side rendering strengths, working well for different types of applications and improving user engagement. It is good for business and enterprise apps, landing pages, and any consumer-facing sites. It is also great for apps that require a quick start and responsive interfaces.

Rules for the Application of Render Modes

Let's take a look at the main rules for applying render modes.

• The default render mode is Static.
• Interactive Server, Interactive WebAssembly, and Interactive Auto render modes can be utilized at the component level, even allowing different render modes for sibling components.
• It's crucial to keep in mind that switching to a different interactive render mode in a child component is restricted. For instance, a Server component cannot be a child of a WebAssembly component.
• When passing parameters from a Static parent to an interactive child component, ensure they are JSON serializable. This limitation implies that render fragments or child content from a Static parent component cannot be passed to an interactive child component.

In essence, .NET 8's render modes give developers the tools they need for a more tailored and efficient web development experience.

Wrapping Up

The release of .NET 8 is a significant leap forward for Microsoft's Blazor web platform, introducing notable improvements and rendering modes that give developers more flexibility. With the evolution to .NET 8, Blazor becomes a full web UI platform.

The importance of such changes lies in the expanded capabilities of Blazor as a complete framework, allowing developers to create applications that support both static and interactive content scenarios. Interactive rendering modes automatically include pre-rendering, optimizing user interaction, and reducing load times. Streaming rendering further improves the interaction with pages involved in long-running asynchronous tasks.

In other words, .NET 8 rendering modes provide developers with customized web development options, providing precise control and optimization based on application requirements.

Devessence team has extensive expertise in .NET development and Microsoft technologies, and we would be happy to advise you more about the new capabilities of .NET 8. Let’s talk!