ASP.Net Core Blazor Hosting Models
By: Madhu Sudhanan
Tags: Dotnet, Microsoft, Aspnetcore, Blazor, Dotnet Core

It is very glad to see that the web technology is improvising day by day. One such notable improvement is the introduction of WebAssembly and direct usage of them in evergreen browsers.

As you guys know, Microsoft ASP.Net Core team is working and releasing the preview versions of Blazor, which would be a leap for both Microsoft and .NET developers in the web platform. To know more about getting started with the Blazor, please refer here.

Hosting Models

Blazor comes with three hosting models which are categorized how the App is served to the browser and interactions are handled. I have been checking these hosting models recently and want to share my thought here.

There are three types of Hosting Models

Client side

ASP.NET Core Hosted

Server side

We are going to see how Blazor team has categorized these model and some features of them.

Client side

Client side hosting model is mostly suitable for evergreen browsers. Here the Blazor application itself is served to the browser.

ASP.NET Core Blazor — Client side hosting model

The above image shows how the Blazor app resides in the browser.

Key Notes

Since the whole application resides in the browser, DOM updates will be handled in the browser itself.

will be handled in the browser itself. Works in offline mode since no server interactions involved.

since no server interactions involved. Not suitable for data base connectivity as it required to send connection string to the client side which might be a potential security risk.

as it required to send connection string to the client side which might be a potential security risk. Debugging is hard as browser DevTools are at initial stage of using web assemblies.

as browser DevTools are at initial stage of using web assemblies. Initial page load might be high as all required DLL/Assemblies will be downloaded at the browser.

IE11 is not supported.

ASP.NET Core Hosted

ASP.NET Core Hosted model is an improved version of client side hosting model which is also suitable for evergreen browsers. Here the client part of the Blazor application will be served to the browser and server connections are made using SignalR.

ASP.NET Core Hosted model

The above image shows how the ASP.NET Core Hosted model application architecture.

Key Notes

DOM updates will be handled in the server part which is hosted in ASP.NET Core server.

will be handled in the server part which is hosted in ASP.NET Core server. Do not works in offline mode since signal connection is required for various actions(Event dispatching, DOM updates etc).

since signal connection is required for various actions(Event dispatching, DOM updates etc). Suitable for data base connectivity and operation. You can use Web APIs to consume and do data base operations.

You can use Web APIs to consume and do data base operations. Debugging is not possible for client part as browser DevTools are at initial stage of using web assemblies.

as browser DevTools are at initial stage of using web assemblies. Initial page load might be high based on application side as all required DLL/Assemblies will be downloaded at the browser.

IE11 is not supported.

Server side

In the Server side hosted model, the whole application will reside in the ASP.NET Core server and requests will be made from browser to server for various actions. As this does not send any form of DLL to the browser, it is supported by legacy browsers such as IE11.

ASP.NET Core Blazor — Server side hosted model

The above image shows how the server side model application architecture.

Key Notes

DOM updates will be handled in the server part which is hosted in ASP.NET Core server. SignalR is used for connection.

will be handled in the server part which is hosted in ASP.NET Core server. SignalR is used for connection. Do not works in offline mode since signal connection is required for various actions(Event dispatching, DOM updates etc).

since signal connection is required for various actions(Event dispatching, DOM updates etc). Suitable for data base connectivity and operation. You can use Web APIs to consume and do data base operations.

You can use Web APIs to consume and do data base operations. Debugging is good . You can use default visual studio debugging procedure to debug your application.

. You can use default visual studio debugging procedure to debug your application. Initial page load will be good.

IE11 is supported as it does not send WebAssembly to the browsers.

Conclusion

I hope that above sections will give you some idea about the hosting models used by Blazor.

If you find this post interesting give clap and share this post with your friends. Thanks for reading and also check my other posts.

Good luck with WASMing..