Blazor Rendering Modes in .Net 8.0

This article explains the effect of rendering modes on components in blazor web applications.
Before the launch of .Net 8.0, the blazor applications typically adopted one of the following hosting models:


  1. Blazor Server

  2. Blazor Web Assembly (WASM)

Blazor Server:

  • In this model, the application runs on the server side and UI updates are sent via SignalR connection to the client.

  • On the client side blazor.server.js file, a javascript runtime is loaded initially to establish a SignalR connection to the server. The initial payload also includes HTML and a style sheet for rendering the initial page.

  • The initial payload is faster in the blazor server as an essential file is downloaded initially but becomes slower due to round trips to the server for UI updates.

Blazor Web Assembly:

  • In this model, the application runs in the browser using web assembly.

  • In the initial payload, the process is comparatively slow as there is a need to download the whole application on the client side.

  • The initial payload includes downloading Blazor.webassembly.js (Javascript runtime for web assembly), .wasm (Compiled .Net runtime), and .dll (Compiled .Net Assemblies) for the application.

  • The subsequent payloads are faster than the initial load as the majority of the application is already downloaded at the client side and there is no need for continuous communication with the server after the initial load.

As we have established the foundation of blazor hosting models through the insightful journey, our next destination is to embark on the exploration of render modes in .Net 8.0.


What are Render Modes?

Render modes in blazor .Net 8.0 determine what hosting model is being used by each component. Where are they rendered? Are they interactive or static?

There are the following render modes in .Net 8.0 for components:

  1. Static Server

  2. Interactive Server

  3. Interactive WebAssembly

  4. Interactive Auto

But what are these modes? How do they differ from each other? Don’t worry! This article will connect all the queries dot by dot.


Static Server Side Rendering

Static server-side renders at server side. There is no interactivity in the components that use static server rendering mode.

Interactive Server Side Rendering

Interactive Server side renders at server side. It uses a blazor server as a hosting model. This mode provides interactivity.

Interactive Client Side Rendering

This rendering mode uses a web assembly hosting model. The rendering location of interactive web assembly is on the client side. CSR is interactive.

Interactive Auto Rendering

Auto rendering uses both a blazor server and web assembly. Initially, components render on the server side and then on the client side after the web assembly resources are downloaded. This mode is also interactive.



Read following articles to understand the details of these rendering modes:


Static SSR

Interactive SSR

Interactive CSR

Interactive Auto