.NET 8 Released - Awesome new Blazor Render Modes Demystified

In Blazor 8, Microsoft enabled developers to mix and match the use of Blazor Server and Blazor Webassembly on a per page or per component basis.

This new paradigm will require a new way of thinking, but the possibilities are incredible! The decision to use web assembly or server is no longer an all-or-nothing matter. The best tool can be used for the job where it makes sense.

In this video I provide a tutorial that shows how to develop a component that can be seamlessly deployed as Server, WebAssembly, or Auto. I implement a simple message board tied to a database with simple create, read, update and delete functionality.

It serves as a good introduction to anyone new to Blazor in .NET 8 that wants to understand more about the different rendering modes.

Please share your comments about the new Blazor framework. There are a lot of exciting possibilities ahead! If there any topics you would like covered please let me know in the comments.

The code for this video is located here:

00:00 Intro
03:40 Create new Project
07:35 Tour of New Template
09:40 Add Database Object for Posts
12:00 Create a Repository
20:18. Create a Posts Page
23:30 Make the Page work as WebAssembly
31:40. Pre-Rendering on the Server
39:30 Make the Page work as Blazor Server (SignalR)
42:48 Make the Page Automatically Switch from Server to WebAssembly
45:30 Transfer State from Server to WebAssembly when auto switch occurs
53:00. Pre-Render Page only on Server and then switch to WebAssembly

[csunstudent]

I've worked a bit with Blazor Server and Blazor WASM pre .NET 8, but demystifying this new stuff has been too difficult for me until I watched your video. Thank you so much for the detailed guide, explanations, and codebase!!!!

[Duelweb]

Now this explanation was what I was waiting for! Confusion gone! Thanks Tom!

[jsiahaan]

Thank you very much Tom, it's very helpful.

[BarriDuty]

thank you, very good explanation on how to approach this

[paulleahy]

Thanks a lot Tom, very well explained!

[shabanelmogy]

we need big project with blazor to enlarge community of blazor

[sadmagus]

The best video about new Blazor render modes that I've watched so far. In conclusion, you could just use SSR + only WASM render mode instead of Auto, and it would work smoothly, right?

[greglarden]

Thank you for the great explanation. I really like working with Blazor. Having built several systems in both Blazor Server, wasm and angular. I prefer to work with Blazor Wasm/WebApi. I like delegating the UI workload to the client and being able to use C# on both!

I was a little turned off by these changes, but your explanation has kind of relaxed my concerns!

Someone asked about moving the Post Service to a shared project so your not duplicating the code. You could do this by moving your business logic and data access to Mediator Handlers or shared service if you prefer. This would keep it pretty DRY you only need to decide whether the handler is triggered via an api or service call.

[jasonlopeman]

This iwas an awesome explanation and you answered some questions/concerns I had about data changes when switching render modes ... especially for larger data sets. In line with some other comments already made, there is an element of confusion added with this functionality. For me, this is a trade-off I'd be willing to make to stay away from the tediousness of JS front-ends.

One point though, and using the services and an example, there seems to be a lot of repeating your self in this code base to make this work. I'd like to see ideas on how to make Blazor .NET8 interactive rendering work with DRY and clean architecture. Regardless, well done video and explanation. Thumbs up from me.

[TellaTrix]

Wow it was detailed explanation video Tom.

[marianzurini]

Great video very well explained, thank you🤗

[jasminsabanovic]

hi, how do you enable icons next to the fields, e.g. on 14:52 i can see, method icons, property icons etc?

[LevelHorizon]

Very helpful Tom, thanks. There's some inaccurate information and bad advice around about these new features, so it's been difficult find the good stuff. These features needed good and thorough documentation along with the release, but I'm not sure it exists?.

[timmyers]

Great video Tom and an introduction to the new way of rendering, though can't help thinking alot of this is over the top in this instance. I would have expected during the server render to just see pulse boxes as the UI is disabled anyway. Also how would one decide the most appropriate render mode ? Great to also see new new Web assembly components for login/registration.

[Coding_with_Tom]

I think in this particular app a pulse box would be a great idea from a UX perspective. Then the server service would just need the onclient method only implemented and the ssr could render the pulse box with an if statement in the razor and in the initializer method.

[csunstudent]

Hey Tom, I was wondering:
Based on this project structure and assuming you continue to implement new features in this same format, what would your hosting model be if you wanted to deploy your app?

I've gotten a bit confused in the docs as things are broken up explicitly into both Blazor Server and Blazor WASM for the hosting info, but I've also heard that as soon as you have to access server resources, (which an app like this one does) it seems like you have to follow the Blazor Server method of hosting? Could you help shed some light on this?

[shabanelmogy]

how can i sync between sqlite on mobile offline and remote database (restapi with sql server ) ?

[joselitoalonzo]

Thanks Tom. I just have 1 question. Is it possible to put the PostService class in Shared Project and just reference it from there, instead of creating it in both Client and Server Project? Because if you have many forms with various complications of CRUD operations, this strategy will be very tedious.

[XXnickles]

Honestly, I think at this point Blazor is becoming complicated, thanks to they trying to mix everything. Before it was clear web assembly was used for SPAs and server was basically a fancy ajax. Today, components you create must be thought to support 3 different render modes, which might be extremely confusing for a lot of people. To my webassembly in this equation is becoming an additional problem instead of a good solution. I wouldn't invest in blazor as it is; it is a harder sell vs other JS alternatives ( beyond "c#" there is not much else) However, the SSR part + the ability of return rendered component through a web api might open different avenues to use the web platform as it is with stuff like HTMX and minimal scripts, which can be more attractive than all this complexity the introduced here