In its quest to provide a true full-stack experience on the .NET Core framework, Microsoft has been experimenting with client-side development using C# Razor components; at the time of writing, this is called server-side Blazor. There are future plans to release client-side Blazor, which runs directly on the WebAssembly, but that is beyond the scope of this book.

Microsoft initially released a C# Razor component template for ASP.NET Core 3, but this has now been renamed the Blazor (server-side) template.

The name server-side Blazor can be misleading because Blazor is primarily meant to enhance client-side development with dynamic and rich user interfaces.

Let's take a break from our Tic-Tac-Toe demo application and create a simple web app using the server-side Blazor template. Create a new project using the ASP.NET Core application framework first and then the Blazor template as follows:

When the web application is created, you will immediately notice that it has a project structure that is generally similar to any ASP.NET Core template with Startup and Program classes as follows: 

One difference that you will notice immediately is the new .razor file extension that is meant to identify any Razor components, for example, App.razor, as seen in the preceding screenshot. Another difference where we call the AddServerSideBlazor() method to the service collection is found in the Startup class in the ConfigureServices method:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddServerSideBlazor();
    ...
}

In the previous code block, we can see that server-side Blazor is added as a service, and next, in the Configure method, endpoints for Blazor are configured, mainly in order to accept incoming connections for interactive components via the MapBlazorHub() method:

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });

Run the application as it is without changing anything, and you should be able to see the following in your browser: 

The home page displays the Hello, world! text, which is defined in the Index.razor component, and likewise we have Counter.razor and FetchData.razor components that determine what is displayed when the respective tabs are clicked.

As shared components for the whole app, we have MainLayout.razor, which is responsible for the application's layout, and NavMenu.razor, which defines navigation items on the left.

In this example template, the Counter component performs all its functionality by itself, but the FetchData component relies on an external C# service class to provide it with the data that it needs.

If you take a closer look at the counter functionality, most developers would expect to use JavaScript, but you will notice that there is no JavaScript in the Counter component. Take a closer look at any of the Razor components, and you will find no JavaScript or any reference to it! In fact, in the wwwroot section, for any traditional ASP.NET Core template, there will be a js folder, which is a glaring omission from our BlazorDemo! All this is by design; if you are like many backend C# developers who don't do too well with JavaScript, Blazor will be a relief to you!

Blazor is designed in such a way that you, as a developer, will be able to use C# instead of JavaScript on the client-side. It must be noted that Blazor can also work side by side with JavaScript.

Now, let's look at the following code block:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

The preceding code snippet represents the basic page component in a Blazor application. It all starts with routing, in which the exact URL for a page is specified after the @page directive. In the preceding example, you can access this page by adding /counter to the URL and will be able to get to this specific page.

Before we give body some content, just under the @page directive, you can have @using directives, for example, @using BlazorDemo.Data, should you need to access another part of the application. 

You can also have DI, where you can inject a service such as @inject WeatherForecastService ForecastService into a page should you need it.

Finally, we have the @functions section, where you can add as many C# functions as you may need, and this is normally where you would place your JavaScript functions.

Server-side Blazor is so named because, for all the preceding code to work, it is actually executed on the server. What communication channel does it use to ensure real-time rendering? We answer this question in the next section: