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?

So ASP.NET Core Hosted Blazer App is somehow similar with Angular App , less Bandwidth Use, Offline Support , No Server Side Code Dependency , and use of web assembly instead of JavaScript — Tanwer, Nov 16 '18 at 05:56
Blazor is new tech that does away with 99% of the JS you need to touch. You need to read more yourself to get the answers first hand. happy to give you more links if required — Jazb, Nov 16 '18 at 05:59
I still couldn't find the difference between _ASP.NET Core hosted_ and _Server-side_ Blazor... It's pity... — JohnyL, Sep 25 '19 at 07:10

score 29 · Answer 1 · answered Aug 10 '19 at 17:34

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.

It's also worth looking at the [sample Blazor apps](https://github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor/Validation) - both Client-Side and Server-Side. Note the project structure - the Server is just a single project, whereas the Client has separate projects for the server-hosted API and the client-side app. — oatsoda, Nov 27 '19 at 15:01

Jazb · Accepted Answer · 2019-11-27T00:30:07.517

22

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.

edited Nov 27 '19 at 00:30

answered Nov 16 '18 at 05:50

Jazb

4,332
6
29
34

Thnaks , I am not using it for Production Version . Just Doing Some Benchmark in comparison to Angular – Tanwer Nov 16 '18 at 05:59
6

personally i think you're making a good investment of your time. these JS frameworks have a massive learning curve and keep changing while Blazor aims to solve a lot of this while all the time simply knowing C#. As for Benchmarking - I would hold off until they do a release. The client hosted model might be a more fair apples-to-apples comparison though (even more distant release date) – Jazb Nov 16 '18 at 06:03
Agree With You , google end support of every angular version after 12 month (from their official documentation) – Tanwer Nov 16 '18 at 06:13
I would love to see a benchmark performance test between the asp.net core hosted vs server-side scenarios. It sounds like the server-side model will be rolled out first via .NET Core 3.0 but what version of Blazor will that be and will it still be considered "alpha" ? – bitshift Dec 07 '18 at 19:17
Agree with JohnB, this framework as a TON of potential. It's still a bit early yet, but this is very likely to be my preferred framework vs the assorted javascript stacks and their associated tooling. – bitshift Dec 07 '18 at 19:21
2

Link is dead, here is the replacement: https://docs.microsoft.com/en-us/aspnet/core/razor-components/hosting-models?view=aspnetcore-3.0 – Gerald Versluis Feb 14 '19 at 10:14
20

I am confused on why so many people have marked this as the answer when it doesn't seem to answer the question. The question was asking for the difference between "ASP.NET Core Hosted" and "Server Side in ASP.NET Core" not server-side vs client-side. What do I have misunderstood? – Mike-E Jun 06 '19 at 10:29
@Mike-E I don't agree with your reading of the question. the OP is asking about the differences in, and i quote, `difference between these two templates` . The templates being discussed are `Blazor` templates`. of course feel free to disagree, but I think I have it right. – Jazb May 24 '21 at 05:49

pk_code · Answer 3 · 2020-06-04T16:57:19.033

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.

Nice, but could you please elaborate more on the difference between ASP hosted and server? I do not see the use case difference. — Luk164, May 01 '20 at 16:47
I think the difference is one is web assembly and the other is server. So not everything is processed on the server and alot is downloaded and run on the client. It can also run as a PWA with webassembly asp.net core hosted. — Sirus, Aug 26 '20 at 15:42
The explanations for ASP.NET Core Hosted and server-side models are incorrect. An ASP.NET Core hosted Blazor app doesn't establish a SignalR connection at all. It's just the same as the client-side version except the ASP.NET Core serves the Blazor app's resources to the clients. The article you linked to is very poorly written and is full of technical and conceptual errors. See https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#blazor-webassembly — Arad, Oct 17 '20 at 12:53
I have to agree with @Arad, because [the ASP.NET Core app serves the Blazor app to clients](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#blazor-webassembly) but doesn´t execute it, the execution still happens in the browser ([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.](https://www.telerik.com/blogs/a-breakdown-of-blazor-project-types)). If the execution would happen on the server, what would be the point of using WebAssembly at all? — devbf, Nov 06 '20 at 20:58
Here I found another statement regarding the ASP.NET Core Hosted model: [Even though the Blazor client application is hosted on a .NET server, all views are rendered client-side in both the Client-Side and Full-Stack project templates. Currently, there are no AOT/Isomorphic Rendering options for Blazor, but a Server-Side Blazor app model does exist.](https://www.telerik.com/blogs/a-breakdown-of-blazor-project-types) — devbf, Nov 06 '20 at 21:05

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

3 Answers3

Linked