October 10th, 2019

Blazor Server in .NET Core 3.0 scenarios and performance

Daniel Roth

Principal Product Manager

Since the release of Blazor Server with .NET Core 3.0 last month lots of folks have shared their excitement with us about being able to build client-side web UI with just .NET and C#. At the same time, we’ve also heard lots of questions about what Blazor Server is, how it relates to Blazor WebAssembly, and what scenarios Blazor Server is best suited for. Should you choose Blazor Server for your client-side web UI needs, or wait for Blazor WebAssembly? This post seeks to answer these questions, and to provide insights into how Blazor Server performs at scale and how we envision Blazor evolving in the future.

What is Blazor Server?

Blazor Server apps host Blazor components on the server and handle UI interactions over a real-time SignalR connection. As the user interacts with the app, the UI events are sent to the server over the connection to be handled by the various components that make up the app. When a component handles a UI event, it’s rendered based on its updated state. Blazor compares the newly rendered output with what was rendered previously and send the changes back to the browser and applies them to the DOM.

Blazor Server

Since Blazor Server apps run on .NET Core on the server, they enjoy all the benefits of running on .NET Core including great runtime performance and tooling. Blazor Server apps can leverage the full ecosystem of .NET Standard libraries without any browser imposed limitations.

When should I use Blazor Server?

Blazor Server enables you to add rich interactive UI to your .NET apps today without having to write JavaScript. If you need the interactivity of a single-page app in your .NET app, then Blazor Server is a great solution.

Blazor Server can be used to write completely new apps or to complement existing MVC and Razor Pages apps. There’s no need to rewrite existing app logic. Blazor is designed to work together with MVC and Razor Pages, not replace them. You can continue to use MVC and Razor Pages for your server-rendering needs while using Blazor for client-side UI interactions.

Blazor Server works best for scenarios where you have a reliable low-latency network connection, which is normally achieved when the client and server are geographically on the same continent. Apps that require extremely high fidelity instant updates on every tiny mouse twitch, like real-time games or drawing apps, are not a good fit for Blazor Server. Because Blazor Server apps require an active network connection, offline scenarios are not supported.

Blazor Server is also useful when you want to offload work from the client to the server. Blazor Server apps require only a small download to establish the connection with the server and to process UI interactions. All the hard work of running the app logic and rendering the UI is then done on the server. This means Blazor Server apps load fast even as the app functionality grows. Because the client side of a Blazor Server app is so thin, it’s a great solution for apps that need to run on low-powered devices.

Using Blazor Server at scale

Blazor Server can scale from small internal line of business apps to large internet scale apps. While .NET Core 3.0 was still in preview we tested Blazor Server to see what its baseline scale characteristics look like. We put a Blazor Server app under load with active clients and monitored the latency of the user interactions. In our tests, a single Standard_D1_v2 instance on Azure (1 vCPU, 3.5 GB memory) could handle over 5,000 concurrent users without any degradation in latency. A Standard_D3_V2 instance (4 vCPU, 14GB memory) handled well over 20,000 concurrent clients. The main bottleneck for handling further load was available memory. Will you see this level of scale in your own app? That will depend in large part on how much additional memory your app requires per user. But for many apps, we believe this level of scale out is quite reasonable. We also plan to post additional updates on improvements in Blazor Server scalability in the weeks ahead. So stay tuned!

What is Blazor WebAssembly?

Blazor is a UI framework that can run in different environments. When you build UI components using Blazor, you get the flexibility to choose how and where they are hosted and run. As well as running your UI components on the server with Blazor Server, you can run those same components on the client with Blazor WebAssembly. This flexibility means you can adapt to your users’ needs and avoid the risk of being tied to a specific app hosting model.

Blazor WebAssembly apps host components in the browser using a WebAssembly-based .NET runtime. The components handle UI events and execute their rendering logic directly in the browser. Blazor WebAssembly apps use only open web standards to run .NET code client-side, without the need for any browser plugins or code transpilation. Just like with Blazor Server apps, the Blazor framework handles comparing the newly rendered output with what was rendered previous and updates the DOM accordingly, but with Blazor WebAssembly the UI rendering is handled client-side.

Blazor WebAssembly

When should I use Blazor WebAssembly?

Blazor WebAssembly is still in preview and isn’t yet ready for production use yet. If you’re looking for a production ready solution, then Blazor Server is what we’d recommend.

Once Blazor WebAssembly ships (May 2020), it will enable running Razor components and .NET code in the browser on the user’s device. Blazor WebAssembly apps help offload work from the server to the client. A Blazor WebAssembly app can leverage the client device’s compute, memory, and storage resources, as well as other resources made available through standard browser APIs.

Blazor WebAssembly apps don’t require the use of .NET on the server and can be used to build static sites. A Blazor WebAssembly app is just a bunch of static files that can be hosted using any static site hosting solution, like GitHub pages or Azure Static Website Hosting. When combined with a service worker, a Blazor WebAssembly app can function completely offline.

When combined with .NET on the server, Blazor WebAssembly enables full stack web development. You can share code, leverage the .NET ecosystem, and reuse your existing .NET skills and infrastructure.

Including a .NET runtime with your web app does increase the app size, which will impact load time. While there are a variety of techniques to mitigate this (prerendering on the server, HTTP caching, IL linking, etc.), Blazor WebAssembly may not be the best choice for apps that are very sensitive to download size and load time.

Blazor WebAssembly apps also require a browser that supports WebAssembly. WebAssembly is supported by all modern browsers, including mobile and desktop browsers. However, if you need to support older browsers without WebAssembly support then Blazor WebAssembly isn’t for you.

Blazor WebAssembly is optimized for UI rendering scenarios, but isn’t currently great for running CPU intensive workloads. Blazor WebAssembly apps today use a .NET IL interpreter to execute your .NET code, which doesn’t have the same performance as a native .NET runtime with JIT compilation. We’re working to better address this scenario in the future by adding support for compiling your .NET code directly to WebAssembly instead of using an interpreter.

You can change your mind later

Regardless of whether you choose Blazor Server or Blazor WebAssembly, you can always change your mind later. All Blazor apps use a common component model, Razor components. The same components can be hosted in a Blazor Server app or a Blazor WebAssembly app. So if you start with one Blazor hosting model and then later decide you want to switch to a different one, doing so is very straight forward.

What’s next for Blazor?

After shipping Blazor WebAssembly, we plan to expand Blazor to support not just web apps, but also Progressive Web Apps (PWAs), hybrid apps, and even fully native apps.

Blazor PWAs: PWAs are web apps that leverage the latest web standards to provide a more native-like experience. PWAs can support offline scenarios, push notifications, and OS integrations, like support for pinning the app to your home screen or the Windows Start menu.
Blazor Hybrid: Hybrid apps are native apps that use web technologies for the UI. Examples include Electron apps and mobile apps that render to a web view. Blazor Hybrid apps don’t run on WebAssembly, but instead use a native .NET runtime like .NET Core or Xamarin. You can find an experimental sample for using Blazor with Electron on GitHub.
Blazor Native: Blazor apps today render HTML, but the renderer can be replaced to render native controls instead. A Blazor Native app runs natively on the devices and uses a common UI abstraction to render native controls for that device. This is very similar to how frameworks like Xamarin Forms or React Native work today.

These three efforts are all currently experimental. We expect to have official previews of support for Blazor PWAs and Blazor Hybrid apps using Electron in the .NET 5 time frame (Nov 2020). There isn’t a road map for Blazor Native support yet, but it’s an area we are actively investigating.

Summary

With .NET Core 3.0, you can build rich interactive client-side UI today with Blazor Server. Blazor Server is a great way to add client-side functionality to your existing and new web apps using your existing .NET skills and assets. Blazor Server is built to scale for all your web app needs. Blazor WebAssembly is still in preview, but is expected to ship in May of next year. In the future we expect to continue to evolve Blazor to support PWAs, hybrid apps, and native apps. For now, we hope you’ll give Blazor Server a try by installing .NET Core 3.0!

Author

Daniel Roth

Principal Product Manager

Daniel Roth is a Program Manager on the ASP.NET team at Microsoft.

62 comments

Discussion is closed. Login to edit/delete existing comments.

Sort by :

Newest

Newest Popular Oldest

Wil Wilder Apaza Bustamante April 17, 2020 0

this comment has been deleted.
- Daniel Roth Author April 17, 2020 0
  
  A common issue with Blazor Server and DB access is concurrency issues. It can be a bit tricky to ensure that you’re not concurrently accessing the same DbContext issue. Please open an issue on GitHub and we’ll do our best to help you out: https://github.com/dotnet/aspnetcore/issues
  - Wil Wilder Apaza Bustamante April 21, 2020 0
    
    this comment has been deleted.
new proger February 6, 2020 0

Hi Daniel,

What kind of website Blazor (server side) is not recommended for.
I imagine that a blog type site is wrong.

I try to compare RAZOR PAGE vs BLAZOR SERVER
When one is more adequate than the other, or we can do little with the same thing.

Thanks
- Daniel Roth Author February 6, 2020 0
  
  Hello,
  
  Blazor is for building interactive client web UI. Historically client web UI had to be implemented in JavaScript, because that was all that browsers knew how to run. Now, thanks to modern web standards like WebSockets and WebAssembly, you have more options, including .NET.
  
  Razor Pages is for server-rendered web UI. They should be used when you want to receive a browser request and dynamically generate a response.
  
  ASP.NET Core Razor Pages and Blazor are actually complimentary....
  Read more
  Hello,
  
  Blazor is for building interactive client web UI. Historically client web UI had to be implemented in JavaScript, because that was all that browsers knew how to run. Now, thanks to modern web standards like WebSockets and WebAssembly, you have more options, including .NET.
  
  Razor Pages is for server-rendered web UI. They should be used when you want to receive a browser request and dynamically generate a response.
  
  ASP.NET Core Razor Pages and Blazor are actually complimentary. Using one does not preclude the other – they can be used together. You can have server-rendered pages that include Blazor components to make the UI more interactive.
  
  To enable interactivity, Blazor Server apps rely on a stateful connection with the server. Maintaining these connections will impact the scale characteristics, so if you don’t need the additional interactivity then you will likely be better off using a stateless server-rendered setup with Razor Pages or MVC. Once Blazor WebAssembly is available later this year, you will be able to instead offload these UI concerns completely to the client.
  
  I hope this helps!
  
  Read less
Hung Secos January 2, 2020 0

Blazor supports displaying of .swf files ?
Nitin Sawant November 11, 2019 0

waiting to see how the blazor will be combined with xamarin….
building android/ios native app with blazor, will that be possible in near future?
Jing Zhe Shan November 1, 2019 0

It is fascinating to think a picture to use the Blazor WebAssembly code to write a high-performance ray tracer which can have multi-threading support.

I guess if only if in the future the door open for wasm to interact with DOM, how will Blazor Web Assembly to handle it? Dom is just a big and messy object if multi-threading could access at once, how to handle it?

Sorry, it's all my assumptions....better 🏃🏻‍♂️😛

Read more
It is fascinating to think a picture to use the Blazor WebAssembly code to write a high-performance ray tracer which can have multi-threading support.

I guess if only if in the future the door open for wasm to interact with DOM, how will Blazor Web Assembly to handle it? Dom is just a big and messy object if multi-threading could access at once, how to handle it?

Sorry, it’s all my assumptions….better 🏃🏻‍♂️😛

Read less
Dee Santiago October 30, 2019 0

Hi Daniel,
I’m really excited that we can develop web application using C# all the way to the client side. I’m currently working on a Blazor Server Side internal application using JQuery DataTables to list the data and then I use the Blazorise Modal to display the individual objects for editing purposes.
I have everything working via the “Happy Path” and now I want to now handle scenarios when errors occurred.
I’m currently experiencing...
Read more
Hi Daniel,
I’m really excited that we can develop web application using C# all the way to the client side. I’m currently working on a Blazor Server Side internal application using JQuery DataTables to list the data and then I use the Blazorise Modal to display the individual objects for editing purposes.
I have everything working via the “Happy Path” and now I want to now handle scenarios when errors occurred.
I’m currently experiencing 2 issues
1) I want to create a .NET Standard 2.0 Class Library Project where I can do NUnit Testing and I can’t add a reference to the Blazor Server Project and get errors.
Here’s the error message I see:

Error Project ‘{project path}’ targets ‘netcoreapp3.0’. It cannot be referenced by a project that targets ‘.NETStandard,Version=v2.0’.

I saw Steve Sanderson’s post on Blazor Unit Testing and downloaded his prototype but it’s no longer compiling and throws this error message:

Severity Code Description Project File Line Suppression State
Error MSB3073 The command “dotnet “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets../tools/Microsoft.AspNetCore.Blazor.Build.dll” resolve-dependencies “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\SampleApp.dll” –references “C:{path}\04\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolve-dependencies.txt” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/Facades/” –output “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolved.assemblies.txt”” exited with code 1. SampleApp C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets\Blazor.MonoRuntime.targets 533

2) I want to display a user friendly error from within the Blazorise Modal. Currently when it’s successful I display an “update successful message” but now I want to show an friendly error message when it fails and I can’t. I followed the instructions here but I’m not able to get it to work. Here’s what my Update method looks like:

@code {
[CascadingParameter] ModalParameters Parameters { get; set; }
bool ShowForm { get; set; } = true;
bool Success { get; set; } = true;

protected bool IsUpdating { get; set; }

[Parameter]
public WeatherForecast forecast { get; set; }

protected override void OnInitialized()
{
forecast = Parameters.Get<WeatherForecast>("forecast");
}

protected override void OnAfterRender(bool firstRender)
{
if(Success)
{
ShowForm = false;
}
}

private async Task SubmitData()
{
try
{
IsUpdating = true;
StateHasChanged();
throw new Exception("This is a test exception");
//here id put a call to an endpoint to submit data...
ShowForm = false;
Success = true;
IsUpdating = false;
StateHasChanged();
}
catch(Exception ex)
{
ShowForm = true;
Success = false;
IsUpdating = false;
StateHasChanged();
}
}

Is there something I’m doing wrong? Any insight to these issues would be greatly appreciated.

Read less
Dave Bettin October 27, 2019 0

Any plans for using Blazor to write Office add-ins? As opposed to using Javascript?
Kemp Calalo October 23, 2019 0
Hi Daniel,

We are currently trying to understand Blazor Server side and we struggle to do a use case that we think it suitable for Blazor Server. This might be a stupid question but I'll ask it anyways.

So in the basic template when creating a Blazor project, we have a WeatherForecastService that provides the data when it is called by the FetchData.razor component.

@code {
WeatherForecast[] forecasts;

<code>

}

Now, what we want to achieve is...
Read more
Hi Daniel,

We are currently trying to understand Blazor Server side and we struggle to do a use case that we think it suitable for Blazor Server. This might be a stupid question but I’ll ask it anyways.

So in the basic template when creating a Blazor project, we have a WeatherForecastService that provides the data when it is called by the FetchData.razor component.

@code {
WeatherForecast[] forecasts;
```
protected override async Task OnInitializedAsync()
{
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
```
}

Now, what we want to achieve is to update this “forecast” object not from the razor component, but from the “WeatherForecastService” or any other different layer. How can we do that? In essence, what we like to do is update the DOM once we have a new data in our database. We think that to do that, we need to update the “forceasts” object from a different layer, and then when Blazor detects that forecasts object has changed, then it updates the DOM on its own.

Thanks!
Read less
- Larsson, Henrik October 25, 2019 0
  You could handle that by polling or by registering to some event. Then, make sure you inject your
  
  Make your component register to an event (such as OnNewForecasts or similar). Then, update from service and call StateHasChanged() Of course, you could bake in the actual forecast in the eventargs itself. This is just an example:
  
  <code>
  
  Read more
  You could handle that by polling or by registering to some event. Then, make sure you inject your
  
  Make your component register to an event (such as OnNewForecasts or similar). Then, update from service and call StateHasChanged() Of course, you could bake in the actual forecast in the eventargs itself. This is just an example:
  
  @code { protected override void OnInitialized() { ForecastService.NewForecasts += OnNewForecasts; } private void OnNewForecasts() { forecasts = ForecastService.Get(); StateHasChanged(); } }
  Read less
Giuseppe Falce October 21, 2019 0

Hi Daniel

I have already quiet a big application (ASP.NET Core) in production, and I’m planning to integrate Blazor. Currently evaluating both WebAssembly and Server.

Did I understood it correctly: A Razor Component, can only be integrated with an existing MVC View using Blazor Server (it’s not possible to do it with WebAssembly)?

Would appreciate a short answer.

Many thanks
Giuseppe
- Daniel Roth Author October 21, 2019 0
  
  Hi Giuseppe,
  
  You can integrate both Blazor Server and Blazor WebAssembly into an existing ASP.NET Core app. Integrating Blazor WebAssembly is like integrating some JS – it’s just a bunch of static files. However, please note that Blazor WebAssembly is still in preview and not ready for production use yet. If you’re trying to deploy into production now, then Blazor Server is what we would recommend.
  - Giuseppe Falce October 22, 2019 0
    
    Hi Daniel
    
    Thanks for your reply, much appreciated. I think my question was a bit unclear.
    
    Let's assume I have a MVC App with a View "Home.cshtml" that is served by a Controller "HomeController".
    In the view I can integrate a component like that
    
    @(await Html.RenderComponentAsync<MyAwesomeComponent>(RenderMode.[OneOfTheOptions]))
    
    In my understanding this scenario only works, if the MVC App is enabled for Blazor Server. ( Or is the RenderMode.Static also suitable for WebAssembly?)
    
    Many thanks
    Giuseppe
    
    Read more
    Hi Daniel
    
    Thanks for your reply, much appreciated. I think my question was a bit unclear.
    
    Let’s assume I have a MVC App with a View “Home.cshtml” that is served by a Controller “HomeController”.
    In the view I can integrate a component like that
    
    @(await Html.RenderComponentAsync<MyAwesomeComponent>(RenderMode.[OneOfTheOptions]))
    
    In my understanding this scenario only works, if the MVC App is enabled for Blazor Server. ( Or is the RenderMode.Static also suitable for WebAssembly?)
    
    Many thanks
    Giuseppe
    
    Read less
  - Daniel Roth Author October 22, 2019 0
    
    RenderMode.Static is suitable for Blazor WebAssembly apps, but you will also need the wrapper <app> tag so that the content can be updated client-side. You can see an example of this setup here: https://github.com/danroth27/BlazorWebAssemblyWithPrerendering. Please note that since Blazor WebAssembly is still in preview, some of these details are likely to change before we ship.
  - Giuseppe Falce October 22, 2019 0
    Hi Daniel
    
    Thanks again for your help. I managed to adapt your app (try and error). However not really fully understanding what i'm doing :-)
    
    What I did:
    
    In Startup.cs of the client:
    
    <code>
    
    Then I created 2 razor pages MyTest.cshtml and MyTest2.cshtml
    
    <code>
    
    <code>
    
    While MyTest.cshtml works fine, MyTest2.cshtml doesn't. (Because of the AddComponent<> sequence in Startup.cs)
    
    Did I use it as intended or am I on the wrong path?
    
    The Forked and adapted code is here https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering
    
    Many thanks
    
    Read more
    Hi Daniel
    
    Thanks again for your help. I managed to adapt your app (try and error). However not really fully understanding what i’m doing 🙂
    
    What I did:
    
    In Startup.cs of the client:
    
    app.AddComponent<Counter>("counter"); app.AddComponent<Awesome>("awesome");
    
    Then I created 2 razor pages MyTest.cshtml and MyTest2.cshtml
    
    <awesome> @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static)) </awesome> <counter> @(await Html.RenderComponentAsync<Counter>(RenderMode.Static)) </counter> <script src="_framework/blazor.webassembly.js"></script>
    
    @* To make this work, you need to call app.AddComponent<Awesome>("awesome"); before app.AddComponent<Counter>("counter"); in BlazorWebAssemblyWithPrerendering.Client.Startup { *@ <awesome> @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static)) </awesome> <script src="_framework/blazor.webassembly.js"></script>
    
    While MyTest.cshtml works fine, MyTest2.cshtml doesn’t. (Because of the AddComponent<> sequence in Startup.cs)
    
    Did I use it as intended or am I on the wrong path?
    
    The Forked and adapted code is here https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering
    
    Many thanks
    
    Read less
Stephen Lautier October 17, 2019 0

Great post! Gave much more insight into what Blazor currently offers and where its going, thanks!