Blazor hosting models: Blazor WebAssembly (WASM), Blazor Server and Blazor Hybrid

Contents

Blazor is a free, open-source web framework designed primarily for building web UI components. It offers users hosting versatility, providing developers with multiple app deployment options. This includes Blazor WebAssembly running on the client side of the browser to execute .NET apps, Blazor Server running on the server side within the asp.net core runtime environment, and Blazor Hybrid, whose Razor components natively run on the device.

 

Blazor WebAssembly—an overview

Blazor WebAssembly (WASM) is a Single-Page Application (SPA) framework used to build interactive client-side web applications with .NET. WASM has a compact binary format that can run on any host that can interpret those instructions. Its portable nature coupled with a faster load time and efficient size makes it suitable for web compilations.

Generally, the Blazor app and .NET runtime are downloaded on the browser with the app executing on the browser UI thread. Deploying a created Blazor WASM app without the backend ASP.NET core app for its file leads to the creation of a standalone Blazor WebAssembly app, while deployment with a backend app creates a hosted Blazor WebAssembly app.

The hosting model allows developers to enjoy an immersive full-stack web development experience using the .NET framework with code-sharing abilities between server and client apps.

 

Blazor WebAssembly—benefits

Offline app access: once the web application has been executed on the client-machine browser and successfully downloaded, you can disconnect the server and still access the app offline. However, new data will not be retrieved from the server.

No need for ASP.NET core web server: WASM permits serverless deployment scenarios including serving the app from a content delivery network. As such, you do not need to host your application in ASP.NET core web server.

Code sharing: you can reuse the validation codes and business logic models between the client and server, leading to consistency across various sections of the application and enhancing the app development time.

Optimized performance: the enhanced execution of the WASM bytecode in addition to optimized modern browsers lead to better runtime performance and faster load times.

 

When to use Blazor WebAssembly

  • When you want to share libraries and codes between the server and the client.
  • When you want to create real-time applications such as streaming and chats.
  • When you want to develop dashboards and monitoring apps.
  • When you want to develop apps that run offline without constant server connection.

 

Blazor Server—an overview

Blazor Server fully executes on the server side, within the ASP.NET core application. It uses SignalR connection to link with the client’s browser and handle JavaScript calls, UI updates, and events. Both components and rendered output in this hosting framework are decoupled from each other.

In the event of a user interaction with the application, the information is relayed to the server through SignalR, and once the server processes and updates the state of the UI, it sends back the UI changes to the client. Consequentially, the client browser will update the UI based on the received updates.

Blazor Server—benefits

Scalability: it allows for scaling apps to efficiently handle multiple client connections, since it effectively manages each update and application state for every connected client. As a result, Blazor Server apps work efficiently with resource-constrained devices and can concurrently hold a large number of users without straining server resources.

Smaller download size: compared to the Blazor WebAssembly app, Blazor Server has a significantly smaller download size and so the app loads faster, enhancing user interaction for those with slower internet connections.

Optimized performance support: the hosting model works on devices that are resource-constrained and browsers that cannot support WebAssembly.

Faster app development: the availability of preexisting tools, libraries, and frameworks offers users access to a diverse set of functionalities that can accelerate the speed of app development.

 

When to use Blazor Server

  • When you want to build apps that are search-engine friendly.
  • When you want apps with a faster start-up time.
  • When you want to use Visual Studio to debug your .NET code.
  • When you need to keep the initial download size of your application very small.

 

Blazor Hybrid

Blazor Hybrid is a hosting framework that features a blend of web and native technologies. It simplifies the app development process as it merges the functional capabilities of desktop and mobile-native client frameworks. This is supported by the integration of Blazor with the .NET MAUI native app framework, which offers new additional support for Blazor Hybrid app development, enabling code sharing across multiple platforms, including iOS, Windows, and Android.

To render the user interface for the application, Blazor Hybrid apps use WebView, a feature that allows developers to conveniently build native mobile apps using web technologies such as JavaScript, HTML, and CSS. This means developers can use their knowledge of web development to build mobile apps and still leverage native mobile access functionality to build quality, feature-rich hybrid apps with native-like user experience.

 

Blazor Hybrid—benefits

Leverage existing web development skills: developers can use their web development skills, resources, and experience to build mobile apps.

Access to device capabilities: by accessing the device’s underlying system—e.g., sensors, camera, and GPS—developers can create high-quality and feature-rich mobile apps that easily integrate with the existing platform.

Cross-platform development: developers can use a single code base to build apps and reuse the existing components across desktop, web, and mobile. This functionality enhances productivity and user experience by offering consistent functionality across multiple platforms.

 

When to use Blazor Hybrid

  • When developing apps that need to access the capabilities of devices.
  • When you need to build simple apps that may need platform support.

 

Similarities between Blazor hosting models

Factors that make these deployment models similar include:

 

Near-native execution speed

Generally, these Blazor hosting models quickly execute at near-native speed. This makes them ideal for handling complex business logic and concurrent users. For instance, Blazor WASM utilizes mono-compiled runtime and is designed to optimize execution and provides an ideal browser environment for running .NET code.

Blazor Server apps offer efficient execution of business logic and application code as they execute on the server side where there are abundant resources and higher processing power. Meanwhile, Blazor Hybrid has full access to the native capabilities of devices with platform-specific integrations, leading to optimized performance.

 

.NET Integration

These hosting models have .NET integration that Blazor is built on. Developers can access the .NET ecosystem featuring libraries and frameworks and build server-side logic.

 

Differences between Blazor hosting models

The differences between these hosting approaches include:

 

Blazor WebAssembly

Static site hosting: clients download Blazor WASM apps as a set of static files and this can be delivered via a content delivery network such as Azure CDN.

Better UI customization: Blazor WASM runs fully on the client side, hence it provides better UI customization, leading to a more optimized user experience.

 

Blazor Server

Direct access to server and network resources: Blazor Server apps directly access server and network resources when executing, leading to improved performance, especially in high-latency cases.

Small payload size with faster initial load time: this can lead to improved user experience as users can quickly start interacting with the application, reducing the wait time.

 

Blazor Hybrid

Platform-specific requirements: Blazor Hybrid’s native client apps require an installer and platform-specific deployment methods.

Optimal efficiency: the combination of Blazor WASM features and native client API capabilities lead to optimized performance and better user experience.

Blazor hosting models use cases

Below is an overview of the use cases of the three different hosting models.

 

Blazor WebAssembly hosting model

The single-page app (SPA) framework is often used to build apps that can run offline. It is ideal for building internal enterprise applications where the development environment can be controlled.

Client-side SPAs: The SPA framework provides an interactive way to build an interactive client-side web app using .NET. This means that both the user interface and application logic get fully loaded and executed in the client browser, and as a result, this model is ideal for developing interactive applications with no server-side dependency.

Progressive web apps (PWA): PWAs work offline and can be installed on users’ devices. Generally, they offer a native-like experience, hence users can access them from browsers, without the need to install the application. Using Blazor WebAssembly allows developers to build these apps that offer seamless user experience across different platforms and devices.

Code reuse: Blazor WASM enables the reuse of existing .NET code, promoting efficient app development and UI consistency across multiple projects and platforms.

 

Blazor Server

Blazor Server facilitates server-side execution of .NET code and offers client browsers real-time interaction. Real-life use cases of Blazor Server hosting model include:

Enterprise integration: this hosting model’s server-side features make it suitable for developing applications that interact with services such as APIs and databases. It can seamlessly integrate with backend systems and servers.

Internal tools and dashboards: this deployment model can easily integrate with existing .NET backend services. It provides a better way of building customized solutions that meet specific business needs. As such, the Blazor Server hosting model is suitable for building internal tools, reporting apps, and dashboards.

Real-time applications: Blazor Server uses SignalR connection to offer real-time communication features, empowering developers to create responsive and interactive UIs that update in real-time, for example, online gaming apps and chat apps.

Line of Business apps (LOB): Blazor Server’s feature-rich profile makes it suitable for building critical computer apps that integrate with existing APIs and .NET backend services. This makes the host model suitable for running robust enterprises and requiring real-time updates.

 

Blazor Hybrid

Blazor Hybrid provides a convenient way to modernize apps with real-life use cases such as:

Proof-of-concept prototypes: Blazor Hybrid’s code-sharing ability can help businesses quickly analyze the viability of their project concepts. This makes it ideal for use in rapidly creating proof-of-concept apps.

Productivity apps: the .NET environment and the model’s ability to reuse UI components make it ideal for building modern productivity apps help to reduce workload.

Cross-platform apps: the Blazor WebAssembly hosting model can be used to develop cross-platform apps for Android, iOS, macOS, and Windows using a single codebase. The hosting model is ideal for businesses creating multi-platform mobile apps.

 

Conclusion

Blazor hosting models provide developers with multiple ways to deploy their apps. Blazor WASM, which can work offline, ensures that client capabilities and resources are fully leveraged. Blazor Server loads apps much faster and offers support to resource-constrained devices, while Blazor Hybrid leverages web technologies and the native capabilities of the device and allows code sharing across platforms. Thus, Blazor’s multiple hosting approaches offer flexibility, which is vital for a customized user experience, enhanced performance, and improved productivity, enabling developers to quickly build modern, feature-rich apps.

Sign up for the newsletter and other marketing communication

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of sending commercial information and conducting direct marketing; the legal basis for processing is the controller’s legitimate interest in conducting such marketing; Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data will be processed according to our privacy policy.

You may also find interesting:

Fluent UI

Fluent UI is an open-source design system for building user interfaces. Read on to see how it can help you build consistent UI across different platforms.

Micro frontends: pros and cons

Micro frontends can be an alternative to the frontend monolith architecture, especially for more complex projects. Read on to find out more.

Book a free 15-minute discovery call

Looking for support with your IT project?
Let’s talk to see how we can help.

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller's legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data in this form will be processed according to our privacy policy.

You can also send us an email.

In this case the controller of the personal data will be FABRITY sp. z o. o. and the data will be processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller’s legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Personal data will be processed according to our privacy policy.

dormakaba 400
frontex 400
pepsico 400
bayer-logo-2
kisspng-carrefour-online-marketing-business-hypermarket-carrefour-5b3302807dc0f9.6236099615300696325151
ABB_logo

Book a free 15-minute discovery call

Looking for support with your IT project?
Let’s talk to see how we can help.

Bartosz Michałowski

Head of Sales at Fabrity

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller's legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data in this form will be processed according to our privacy policy.

You can also send us an email.

In this case the controller of the personal data will be FABRITY sp. z o. o. and the data will be processed for the purpose of responding to a submitted inquiry; the legal basis for processing is the controller’s legitimate interest in responding to a submitted inquiry and not leaving messages unanswered. Personal data will be processed according to our privacy policy.

dormakaba 400
toyota
frontex 400
Ministry-of-Health
Logo_Sanofi
pepsico 400
bayer-logo-2
kisspng-carrefour-online-marketing-business-hypermarket-carrefour-5b3302807dc0f9.6236099615300696325151
ABB_logo

Need help with your Blazor development project?

Leave your email to see how we can help.

The controller of the personal data is FABRITY sp. z o. o. with its registered office in Warsaw; the data is processed for the purpose of marketing Fabrity’s products or services; the legal basis for processing is the controller's legitimate interest. Individuals whose data is processed have the following rights: access to data, rectification, erasure or restriction, right to object and the right to lodge a complaint with PUODO. Personal data in this form will be processed according to our privacy policy.

You can also send us an email.

In this case the controller of the personal data will be FABRITY sp. z o. o. and the data will be processed for the purpose of marketing Fabrity’s products or services; the legal basis for processing is the controller’s legitimate interest. Personal data will be processed according to our privacy policy.