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.
Read more on Web development:
Headless CMS vs. traditional CMS—comparison
A web application security checklist for every stage of development
Micro frontends: pros and cons
Progressive web apps (PWA)—a gentle introduction
9 reasons why Drupal development is worth your attention
React best practices for web development
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.
