Blazor Server Fundamentals

In this series, you will learn about the building blocks of Blazor Server.

• Component.
• Directive.
• Dependency Injection.
• Form.

In this tutorial, you will learn:

• How Blazor Server works.
• Some misconceptions about Blazor Server.

How Blazor Server works

The following image shows the flow of Blazor Server.

Step 1: Browser sends an HTTP request to Blazor Server.

Step 2: Blazor Server receives the quest, then renders HTML along with blazor.server.js.

Step 3: Kestrel sends the rendered HTML and blazor.server.js back to the Browser.

Step 4 and beyond: blazor.server.js then open a WebSocket connection to Kestrel and maintain the connection to open. Whenever the user interacts with the UI, blazor.server.js will send the data to Blazor Server. Blazor Server have to process that data and tell blazor.server.js to update the UI accordingly.

Some misconceptions about Blazor Server

• Try to modify HttpContext.

Blazor Server has only one initial request, which will not contain any additional information. Thus, setting value to the HttpRequest and HttpResponse would be useless.

• Consume a huge memory/CPU and performance problem.

Blazor Server uses WebSocket underlying and maintains an open connection, which leads people to think that Blazor Server consumes a huge resource to keep that connection open. In fact, WebSocket is lightweight, even faster and lighter than the traditional JSON. WebSocket will not consume resource of the host when the client is idle.

• Serving file outside wwwroot folder without configuration.

By default, wwwroot folder is the public folder that contains JS, CSS, image files. To serve files outside the wwwroot folder, you need to configure Blazor Server to do that.