ASP.Net Core Blazor Hosting Models

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.

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

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

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

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

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

2) Works in offline mode since no server interactions involved.

3) Not suitable for data base connectivity as it required to send connection string to the client side which might be a potential security risk.

4) Debugging is hard as browser DevTools are at initial stage of using web assemblies.

5) Initial page load might be high as all required DLL/Assemblies will be downloaded at the browser.

6) IE11 is not supported.

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.

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

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

2) Do not works in offline mode since signal connection is required for various actions(Event dispatching, DOM updates etc).

3) Suitable for data base connectivity and operation. You can use Web APIs to consume and do data base operations.

4) Debugging is not possible for client part as browser DevTools are at initial stage of using web assemblies.

5) Initial page load might be high based on application side as all required DLL/Assemblies will be downloaded at the browser.

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.

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

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

2) Do not works in offline mode since signal connection is required for various actions(Event dispatching, DOM updates etc).

3) Suitable for data base connectivity and operation. You can use Web APIs to consume and do data base operations.

4) Debugging is good. You can use default visual studio debugging procedure to debug your application.

5) Initial page load will be good.

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

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.