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?

Waverly

blazor.net/docs/host-and-deploy/hosting-models.html – Bernoulli

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 – Waverly

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 – Bernoulli

I still couldn't find the difference between ASP.NET Core hosted and Server-side Blazor... It's pity... – Gregor

Answer 1

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.

Bernoulli

Thnaks , I am not using it for Production Version . Just Doing Some Benchmark in comparison to Angular – Waverly

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) – Bernoulli

Agree With You , google end support of every angular version after 12 month (from their official documentation) – Waverly

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" ? – Aviary

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. – Aviary

Link is dead, here is the replacement: learn.microsoft.com/en-us/aspnet/core/razor-components/… – Charge

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? – Still

@Still 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. – Bernoulli

Answer 2

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.

Walczak

It's also worth looking at the sample Blazor apps - 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. – Truculent

Answer 3

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

• Blazor WebAssembly App
• Blazor Server App

https://learn.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.

Klee

Nice, but could you please elaborate more on the difference between ASP hosted and server? I do not see the use case difference. – Kurzawa

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. – Namesake

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 learn.microsoft.com/en-us/aspnet/core/blazor/… – Matchmark

I have to agree with @Arad, because the ASP.NET Core app serves the Blazor app to clients 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.). If the execution would happen on the server, what would be the point of using WebAssembly at all? – Dissension

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. – Dissension