Blazor is a web framework from Microsoft for building interactive web applications. Its main selling point is that you can write your front-end code using C# instead of JavaScript. This means you can build a full-stack web application—both the part that runs on the server and the part that runs in the user's browser—with a single programming language.

It works by letting you create reusable UI components using a combination of HTML, CSS, and C#. This mix of HTML and C# code is done using a syntax called Razor. You might see files with a .razor extension; these are Blazor components.

One of Blazor's most flexible features is its choice of hosting models. This determines where your C# code actually runs. There are two main options: Blazor Server and Blazor WebAssembly.

Blazor Server

In the Blazor Server model, your application runs on the server. When a user interacts with the page, the browser sends a message to the server over a real-time connection using a technology called SignalR. The server processes the event, calculates the changes to the UI, and sends the difference back to the browser, which then updates the page.

This model is great for a fast initial load, as the browser only needs to download a small amount of data. It also has full access to server-side resources and .NET APIs. The downside is that it requires a constant, low-latency connection to the server to feel responsive.

Blazor WebAssembly

Blazor WebAssembly, often called Blazor Wasm, runs your C# code directly in the browser. It achieves this using WebAssembly, a standard that allows code written in languages like C# to run in a web browser at near-native speed.

When a user first visits the site, the browser downloads the application, the .NET runtime (compiled to WebAssembly), and any necessary libraries. After this initial download, the app runs entirely on the user's device. This means it can work offline and offloads processing from the server. The trade-off is a larger initial download size and potentially slower performance on very old or low-powered devices.

Choosing between them depends on your application's needs. Do you need offline capability? Go with WebAssembly. Is a fast first load critical? Server might be better.

Beyond using C# on the front end, Blazor offers several compelling advantages for developers.

First, you can share code and libraries between the client and server. A data validation model, for instance, can be written once and used in both the browser UI and the server-side API. This reduces code duplication and simplifies development.

Second, you get to leverage the entire .NET ecosystem. You can use familiar tools like Visual Studio and thousands of existing NuGet packages in your front-end application. This is a massive productivity boost.

Finally, Blazor is built for performance. Blazor WebAssembly executes your .NET code directly in the browser, offering speeds that are hard to match with traditional JavaScript-based frameworks.

Time to check what you've learned.

Understanding Blazor's architecture and hosting models is the first step. Next, you'll see how to put these concepts into practice by building your first application.