If you have started learning about ASP.NET Blazor, congratulations! You're about to embark on a journey into modern web development with powerful tools at your disposal. One of the first choices you'll encounter when building your Blazor application is how to host it. In simpler terms, it's like deciding where to set up shop for your web app.
Think of it this way: When you build a website or web application, you need a place to put it so that people can access it on the internet. ASP.NET Blazor offers you several hosting models to choose from, each with its own set of advantages and use cases.
In this article, we'll break down the three primary hosting models for ASP.NET Blazor Hosting Models: Blazor Server, Blazor WebAssembly, and Blazor Hybrid. By the end, you'll have a clear understanding of what each model offers and which one might be the best fit for your project. So, let's get started and find out which hosting model suits your needs!
Table of Contents:
What is ASP.NET Blazor?
ASP.NET Blazor is a web framework that allows developers to build interactive web applications using C# and HTML. Blazor applications run in the browser, without the need for a server connection. This makes them ideal for developing high-performance, offline-capable, and portable web applications.
Here are some of the reasons why you might need to use Blazor:
To develop high-performance, offline-capable, and portable web applications.
To build interactive web applications using C# and HTML, which are familiar languages for many developers.
To leverage the power of .NET to develop web applications.
To use a web framework that is supported by Microsoft and the .NET community.
ASP.NET Blazor Hosting Models
Blazor hosting models are the different ways that Blazor components can be hosted. The three main hosting models are:
Blazor Server
Blazor WebAssembly
Blazor Hybrid
Blazor Server
Blazor Server is a web framework that allows you to build interactive web pages and applications using C# and HTML. Blazor Server applications run on the server and communicate with the client using a SignalR connection. This allows for real-time updates to the UI, but it also requires a server connection.
Here's a step-by-step explanation of how Blazor Server works:
The user opens a web page that contains a Blazor Server application.
The browser establishes a SignalR connection with the server.
The server sends the Blazor Server application to the browser.
The browser instantiates the Razor components and renders them to the DOM (Document Object Model). The DOM is a tree-based representation of the HTML document.
The user interacts with the Blazor Server application.
The Blazor Server application sends the user's interactions to the server over the SignalR connection.
The server processes the user's interactions and updates the state of the application.
The server sends the updated state of the application to the browser over the SignalR connection.
The browser updates the DOM to reflect the changes.
Techniques to achieve high performance:
Blazor Server applications use a variety of techniques to achieve high performance. For example,
Differential updates: Blazor Server uses differential updates to only send the changes to the state of the application to the browser. This reduces the amount of data that needs to be transferred over the SignalR connection.
Code minification: Blazor Server applications are minified before they are sent to the browser. This reduces the size of the application and improves loading times.
Bundling: Blazor Server applications are bundled into a single file before they are sent to the browser. This reduces the number of HTTP requests that need to be made.
Caching: Blazor Server applications can cache resources, such as HTML, CSS, and JavaScript files. This reduces the amount of data that needs to be transferred over the network.
Advantages of using Blazor Server:
Smaller download size and faster loading: Blazor Server apps have a smaller download size and load faster than Blazor WebAssembly apps, because they do not need to download the .NET runtime to the client device.
Full access to server capabilities: Blazor Server apps have full access to server capabilities, such as the .NET Core APIs and server resources.
Existing .NET tooling works: Blazor Server apps can be developed using existing .NET tooling, such as Visual Studio and the .NET Core debugger.
Thin clients supported: Blazor Server works with all browsers, even those that do not support WebAssembly. It also works on resource-constrained devices.
Code security: The code for Blazor Server apps is not sent to the client device, so it is protected from inspection and tampering by users.
Disadvantages of using Blazor Server:
Higher latency: Blazor Server apps have higher latency than Blazor WebAssembly apps, because every user interaction involves a network hop between the client and the server.
No offline support: Blazor Server apps cannot run offline, because they require a connection to the server.
Scaling challenges: Scaling Blazor Server apps with many users can be challenging, because the server needs to handle multiple client connections and client state.
Server requirement: Blazor Server apps require an ASP.NET Core server to run. They cannot be deployed using serverless computing platforms, such as Azure Functions.
Here are some examples of Blazor Server applications:
Chat applications
Stock trading applications
Dashboards
Real-time monitoring applications
Multiplayer games
Blazor WebAssembly
Blazor WebAssembly is a web framework that allows you to build interactive web pages and applications using C# and HTML. Blazor WebAssembly applications run in the browser, without the need for a server connection. This makes them ideal for developing high-performance, offline-capable, and portable web applications.
Here's a step-by-step explanation of how Blazor WebAssembly works:
The user opens a web page that contains a Blazor WebAssembly application.
The browser downloads the Blazor WebAssembly application, which is a .NET assembly that contains Razor components. Razor components are written in C# and HTML, and they can be used to create interactive web pages and applications.
The browser instantiates the Razor components and renders them to the DOM (Document Object Model). The DOM is a tree-based representation of the HTML document.
The user interacts with the Blazor WebAssembly application.
The Blazor WebAssembly application responds to the user's interactions by updating the DOM.
The browser re-renders the DOM to reflect the changes.
Techniques to achieve high performance
Blazor WebAssembly uses a variety of techniques to achieve high performance, including:
WebAssembly: Blazor WebAssembly applications are compiled to WebAssembly, which is a low-level binary format that can be executed very efficiently by the browser.
Ahead-Of-Time (AOT) compilation: Blazor WebAssembly applications are compiled to machine code before they are downloaded to the browser. This reduces the amount of time that it takes for the browser to load and start executing the application.
Static web app hosting: Blazor WebAssembly applications can be deployed as static web apps. Static web apps are served directly from a content delivery network (CDN), which means that they can be accessed very quickly from anywhere in the world.
Lazy loading: Blazor WebAssembly applications can lazily load resources, such as images and fonts. This means that the resources are only loaded when they are needed, which improves performance.
Advantages of using Blazor WebAssembly App:
Apps can run offline: Blazor WebAssembly apps can still run even if the server is offline, because they are downloaded to the client device.
Leverage client resources: Blazor WebAssembly apps can take advantage of the client device's resources, such as the CPU and memory. This can make them faster and more responsive than web apps that are hosted on a server.
Reduced server load: Blazor WebAssembly apps offload work from the server to the client device. This can reduce the load on the server, making it more scalable and reliable.
Serverless deployment possible: Blazor WebAssembly apps can be deployed without requiring an ASP.NET Core web server. This makes it possible to deploy them using serverless computing platforms, such as Azure Functions.
Disadvantages of using the Blazor WebAssembly App:
Limited capabilities: Blazor WebAssembly apps are limited by the capabilities of the browser. For example, they cannot access native device features, such as the camera and microphone.
Client requirements: Blazor WebAssembly apps require a client device with a modern browser that supports WebAssembly.
Larger download size: Blazor WebAssembly apps are larger in size than traditional web apps, because they include the .NET runtime. This can result in longer loading times.
Code security: The code for Blazor WebAssembly apps is sent to the client device, where it can be inspected and tampered with by users.
Here are some examples of Blazor WebAssembly applications:
E-commerce applications
Social media applications
Gaming applications
Productivity applications
Educational applications
Blazor Hybrid
The Blazor Hybrid app is a combination of a desktop app and a mobile app. The desktop app is written in a native desktop framework, such as WPF or Windows Forms. The mobile app is written in a native mobile framework, such as Xamarin.Forms or Flutter.
BlazorWebView Control
Both the desktop app and the mobile app contain a BlazorWebView control. The BlazorWebView control is a platform-specific control that allows you to embed a Blazor Web View in your native app.
When the Blazor Hybrid app is launched, the BlazorWebView control loads the Blazor WebAssembly application. The Blazor WebAssembly application is a .NET assembly that contains Razor components. Razor components are written in C# and HTML, and they can be used to create interactive web pages and applications.
The Blazor WebAssembly application runs in the BlazorWebView control. The BlazorWebView control renders the Blazor components to the DOM (Document Object Model) of the native app. The DOM is a tree-based representation of the HTML document.
The native app can interact with the Blazor WebAssembly application using a local interop channel. The local interop channel allows the native app to call C# methods in the Blazor WebAssembly application, and it also allows the Blazor WebAssembly application to call native methods in the native app.
The Blazor Hybrid image also shows how the DOM is shared between the Blazor WebAssembly application and the native app. This means that the native app can manipulate the DOM of the Blazor WebAssembly application, and the Blazor WebAssembly application can manipulate the DOM of the native app.
Here's a step-by-step explanation of how a Blazor Hybrid app might work:
The user launches the Blazor Hybrid app.
The BlazorWebView control loads the Blazor WebAssembly application.
The Blazor WebAssembly application displays a login form.
The user enters their username and password and clicks the login button.
The Blazor WebAssembly application calls a C# method in the native app to authenticate the user.
The native app authenticates the user and returns a token to the Blazor WebAssembly application.
The Blazor WebAssembly application stores the token and displays the main page of the app.
The user clicks on a button in the app.
The Blazor WebAssembly application calls a C# method in the native app to fetch some data from a database.
The native app fetches the data and returns it to the Blazor WebAssembly application.
The Blazor WebAssembly application updates the UI with the data.
Advantages of using the Blazor Hybrid App:
Reuse existing components: You can reuse existing Razor components that you have developed for web applications. This can save you a lot of time and effort.
Leverage web development skills: You can develop Blazor Hybrid apps using C# and HTML, which are familiar and productive languages for web development.
Full access to native device capabilities: Blazor Hybrid apps have full access to the native capabilities of the device, such as the camera, microphone, and GPS.
Disadvantages of using the Blazor Hybrid App:
Separate native client apps for each platform: You need to build, deploy, and maintain separate native client apps for each target platform (Android, iOS, Windows, etc.).
Longer to install: Native client apps usually take longer to find, download, and install than accessing a web app in a browser.
Here are some examples of Blazor Hybrid applications:
Desktop applications
Mobile applications
Progressive Web Apps
The Difference: Blazor Server vs Blazor WebAssembly vs Blazor Hybrid
In the section above, we talked about three ways to host Blazor: Blazor Server, Blazor WebAssembly, and Blazor Hybrid. Now, let's understand how each of them is different from the others.
1. Complete .NET API compatibility
Blazor Server apps have complete .NET API compatibility, meaning that they can access any .NET API that is available on the server.
Blazor WebAssembly apps have limited .NET API compatibility, as they can only access APIs that are available in WebAssembly.
Blazor Hybrid apps have complete .NET API compatibility, as they run on the .NET runtime natively on the target platform.
2. Direct access to server and network resources
Blazor Server apps have direct access to server and network resources, as they are hosted on the server.
Blazor WebAssembly apps and Blazor Hybrid apps do not have direct access to server and network resources, as they are executed on the client. However, they can access server and network resources indirectly via protected server-based APIs.
3. Small payload size with fast initial load time
Blazor Server apps have relatively small payload sizes with faster initial load times, as they do not need to download the .NET runtime to the client.
Blazor WebAssembly apps and Blazor Hybrid apps need to download the .NET runtime to the client, which can result in larger payload sizes and slower initial load times.
4. Near native execution speed
Blazor Hybrid apps offer the best possible speed, as they run using the .NET runtime natively on the target platform.
Blazor WebAssembly apps are slower, as they run using the .NET runtime for WebAssembly, which is interpreted by the browser.
Blazor Server apps are the slowest, as they run on the server and communicate with the client using SignalR.
5. App code secure and private on the server
Blazor Server apps have app code that is secure and private on the server.
Blazor WebAssembly apps and Blazor Hybrid apps can use server-based APIs to access functionality that must be kept private and secure. However, this requires developing and maintaining server-based APIs, which can be costly and complex.
6. Run apps offline once downloaded
Blazor WebAssembly apps built as Progressive Web Apps (PWAs) and Blazor Hybrid apps can run offline once downloaded.
Blazor Server apps cannot run offline.
7. Static site hosting
Blazor WebAssembly apps can be hosted as static sites, as they are downloaded to clients as a set of static files.
Blazor Hybrid apps and Blazor Server apps cannot be hosted as static sites.
8. Offloads processing to clients
Blazor WebAssembly apps and Blazor Hybrid apps offload processing to clients, as they run on the client.
Blazor Server apps do not offload processing to clients, as they run on the server.
9. Full access to native client capabilities
Blazor Hybrid apps have full access to native client API capabilities via .NET native app frameworks.
Blazor WebAssembly apps and Blazor Server apps do not have full access to native client capabilities.
10. Web-based deployment
Blazor WebAssembly apps can be deployed on the web, as they run in the browser.
Blazor Hybrid apps are native client apps that typically require an installer and platform-specific deployment mechanism.
Blazor Server apps are deployed on a server.
Which one to choose?
Here are some key factors to consider while choosing between ASP.NET Blazor hosting models:
App requirements: What are the functional and non-functional requirements of your app? For example, do you need real-time updates? Does your app need to run offline? Does your app need access to native device features?
Target audience: Who is your target audience? Are you targeting users with modern browsers and devices? Are you targeting users with low-powered devices or limited internet connectivity?
Development skills and resources: What are your development skills and resources like? Do you have experience with .NET, C#, and WebAssembly? Do you have the resources to build, deploy, and maintain separate native client apps for each target platform?
Here are some recommendations for choosing a Blazor hosting model:
If you need real-time updates, then Blazor Server or Blazor Hybrid is a good choice.
If you need offline support, then Blazor WebAssembly or Blazor Hybrid is a good choice.
If you need access to native device features, then Blazor Hybrid is the only option.
If you are targeting users with low-powered devices or limited internet connectivity, then Blazor WebAssembly is a good choice.
If you have experience with .NET, C#, and SignalR, then Blazor Server is a good choice.
If you have experience with .NET, C#, and WebAssembly, then Blazor WebAssembly is a good choice.
If you have experience with .NET, C#, and native app development, then Blazor Hybrid is a good choice.
Conclusion
When it comes to ASP.NET Blazor hosting models, your choice should align with your project's specific needs:
Use Blazor Server for applications requiring real-time updates, server-side logic, and data protection.
Opt for Blazor WebAssembly when you need a fully client-side app with offline capabilities.
Consider Blazor Hybrid for a blend of server and client components, offering real-time features and seamless user experiences.
Ultimately, the best fit depends on your project's complexity, performance, scalability, and offline requirements. ASP.NET Blazor provides flexibility, allowing you to switch hosting models as your project evolves. Make your choice confidently, knowing you have the tools to create dynamic web applications that meet your goals.