Blazor, ASP.NET Core Hosted vs Server Side in ASP.NET Core

Question

I am trying my hands on blazor.Net which is an experimental framework.

I already developed a small project in this Framework and its awesome.

But after recent update in Blazor Language Service on 14 November I am seeing two options in Template selection.

First is Blazor (ASP.NET Core Hosted)

Second is Blazor (Server Side in ASP.NET Core)

There is no information about difference between them,

Can anybody tell me what is difference between these two templates and when should choose which one?

Answer 1

I think the accepted answer does not answer the question asked like Mike-EEE mentioned in one of the comments.

The necessary information can be found under this link: https://www.telerik.com/blogs/a-breakdown-of-blazor-project-types

The Blazor Full-Stack template encompasses the same project structure as the Client-Side template with a few additions. Just like the Client-Side template there is no HTML rendered by the server and all files are delivered to the client as static files including .NET binaries. The difference however is added ASP.NET Core hosting and Web API and a Shared project for common application logic.

The template includes three projects: a Client-Side Blazor application Blazor.Client, an ASP.NET Core server application Blazor.Server, and a shared .NET Standard project for common application logic Blazor.Shared.

The Blazor Server-Side project template takes a significantly different approach to how a Blazor application is delivered and interacts with the browser. When using the server-side configuration Blazor utilizes the browser as a "thin-client" by deploying a SignalR JavaScript application to the client. On the server, Blazor implements a SignalR hub communicating with the client via web sockets. In the server-side hosting model, Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over the SignalR connection. In this configuration there is no need for WebAssembly and Blazor is executed on the ASP.NET Core runtime at the server. All UI updates are sent as diffs, bidirectionally as binary packets over web sockets. To the user, the application is indistinguishable from any other web application.

Answer 2

In the server-side hosting model, Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

In the client-side model, the Blazor app, its dependencies, and the .NET runtime are downloaded to the browser, and the app is executed directly on the browser UI thread. All UI updates and event handling happens within the same process.

Pros & cons – read more here.

The server side model was seen as less risky to release first so we will see it first with asp.net 3.0. Client side will come later.

Warning: Do not use in Production code until we get a supported release.

Answer 3

UPDATE
Starting .Net core 3.0, Blazor provides 2 hosting model

• Blazor WebAssembly App
• Blazor Server App

https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1

Blazor WebAssembly App

The principal hosting model for Blazor is running client-side in the browser on WebAssembly. The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. The app is executed directly on the browser UI thread. UI updates and event handling occur within the same process. The app's assets are deployed as static files to a web server or service capable of serving static content to clients.

Blazor Server App

With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

Note: Blazor Server is supported from ASP.NET Core 3.0 and Blazor WebAssembly was officially released during Microsoft build 2020 from .NET Core 3.1.4

Blazor WebAssembly 3.2.0 now available

---

Here is article that explains it easily:

Client-Side: (First Blazor template in Template Selection):

In this hosting modal the application is executed client-side in the browser. The Blazor app, its dependencies, and the .NET run-time are downloaded to the browser. The app is executed directly on the browser UI thread. UI updates and event handling occur within the same process. This execution modal is available with a preview version of .Net Core.

• Since the whole application resides in the browser, DOM updates will be handled in the browser itself.
• Works in offline mode since no server interactions involved.
• Not suitable for database connectivity as it required to send the connection string to the client side which might be a potential security risk.
• Debugging is hard as browser DevTools are at the initial stage of using web assemblies.
• The 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 (Second Blazor template in Template Selection)

In this hosting modal, the application is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

• DOM updates will be handled in the server part which is hosted in ASP.NET Core server.
• Do not work in offline mode since the signal connection is required for various actions(Event dispatching, DOM updates etc).
• Suitable for database connectivity and operation. You can use Web APIs to consume and do database operations.
• Debugging is not possible for client part as browser DevTools are at the initial stage of using web assemblies.
• Initial page load might be high based on the application side as all required DLL/Assemblies will be downloaded at the browser.
• IE11 is not supported.

Server-side (Third Blazor template in Template Selection) In this hosting modal, 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.

• DOM updates will be handled in the server part which is hosted in ASP.NET Core server. SignalR is used for a connection.
• Do not work in offline mode since the signal connection is required for various actions(Event dispatching, DOM updates etc).
• Suitable for database connectivity and operation. You can use Web APIs to consume and do database operations.
• Debugging is good. You can use default visual studio debugging procedure to debug your application.
• The initial page load will be good.
• IE11 is supported as it does not send WebAssembly to the browsers.