Blazor Render Modes in .NET 8
Blazor will have 3 render modes in .NET 8:
- SSR
- Server
- WASM
But how do you know which one to use?
Each one has it’s Pros and Cons. Here is a breakdown to help you decide.
SSR
The new render mode for Blazor in .NET 8 is SSR (server side rendering).
SSR renders your Blazor pages and components on the server and sends them to the browser as HTML. The same way MVC and Razor pages works.
Upsides:
- Scales well, just standard server side rendering
- Great for pages displaying information and
- Great for simple forms
- Great for pages where SEO is important
- Mix in Server or WASM pages if needed.
Downsides:
- Can’t build complex UI interactions
Server
Server render mode uses SignalR to establish a websocket connection and uses that to send events and data to the server and receive the response.
This allows devs to build dynamic user interfaces and updates without having to refresh the client.
Upsides:
- Easy to build complex UI interactions
- Adds a SPA like feel to your application
- Great for apps that don’t have 1000’s of concurrent users (see downsides)
- Good debugging experience
- Simple to setup and develop with
Downsides:
- Websocket connections stay alive during a users session.
- Doesn’t scale well if you have thousands of concurrent users.
- Greater latency than wasm due to round trip for UI updates
WASM
WASM (Web Assembly) render mode ships the .NET runtime to the browser, allowing you to write c# code for your user interfaces that is executed on the client side.
The end result is similar to server render mode, allowing devs to build dynamic user interfaces and updates without having to refresh the client.
Upsides:
- Blazor code is executed in the browser
- Easy to build complex UI interactions
- Adds a SPA like feel to your application
- Scales well (better than server render mode)
- Lower latency for UI interactions than server
Downsides
- Very large download size to the browser, making initial app load slow (8MB +)
- Bad debugging experience
- Not simple to setup. Have to create a Blazor WASM project and an API for WASM app to call and get data from.