Explore Blazor render modes and component lifecycle

Blazor is a .NET frontend web framework that supports both server-side rendering and client interactivity in a single programming model:

• Create rich interactive UIs using C#.
• Share server-side and client-side app logic written in .NET.
• Render the UI as HTML and CSS for wide browser support, including mobile browsers.
• Build hybrid desktop and mobile apps with .NET and Blazor.

Components

Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form. Components are .NET C# classes built into .NET assemblies that:

• Define flexible UI rendering logic.
• Handle user events.
• Can be nested and reused.
• Can be shared and distributed as Razor class libraries or NuGet packages.

The component class is written in the form of a Razor markup page with a .razor file extension. Components in Blazor are formally referred to as Razor components, informally as Blazor components. Razor is a syntax for combining HTML markup with C# code.

Static and interactive rendering concepts

Razor components are either statically rendered or interactively rendered:

• Static or static rendering is a server-side scenario where the component is rendered without interplay between the user and .NET/C# code. JavaScript and HTML DOM events remain unaffected, but no user events on the client can be processed with .NET running on the server.

• Interactive or interactive rendering means that the component has the capacity to process .NET events via C# code. The .NET events are processed on the server in the ASP.NET Core runtime, or in the browser on the client in the WebAssembly-based Blazor runtime.

Client and server rendering concepts

Activity that takes place on the user's system is said to occur on the client or client-side. Activity that takes place on a server is said to occur on the server or server-side. The term rendering means to produce the HTML markup that browsers display.

• Client-side rendering (CSR) means that the final HTML markup is generated by the .NET WebAssembly runtime on the client. No HTML for the app's client-generated UI is sent from a server to the client for this type of rendering. User interactivity with the page is assumed.

• Server-side rendering (SSR) means that the final HTML markup is generated by the ASP.NET Core runtime on the server. The HTML is sent to the client over a network for display by the client's browser. No HTML for the app's server-generated UI is created in the client for this type of rendering. SSR can be of two varieties:

  • Static SSR: The server produces static HTML that doesn't provide for us interactivity or maintaining Razor component state.
  • Interactive SSR: Blazor events permit user interactivity and the Blazor framework maintains the component state.

• Prerendering is the process of initially rendering page content on the server without enabling event handlers for rendered controls. The server outputs the HTML UI of the page as soon as possible in response to the initial request, which makes the app feel more responsive to users.

Render modes

Every component in a Blazor Web App adopts a render mode to determine the hosting model it uses, where it's rendered, and if it's interactive.

The following table shows the available render modes for rendering Razor components in a Blazor Web App.

Enable support for interactive render modes

A Blazor Web App must be configured to support interactive render modes. The following extensions are automatically applied to apps created from the Blazor Web App project template during app creation. Individual components are still required to declare their render mode, per the previous Render modes section, after the component services and endpoints are configured in the app's Program file.

Services for Razor components are added by calling AddRazorComponents. The following Program file example adds services and configuration for enabling interactive SSR:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Apply a render mode to a component instance

To apply a render mode to a component instance use the @rendermode Razor directive attribute where the component is used. In the following example, interactive server-side rendering (interactive SSR) is applied to the Dialog component instance:

<Dialog @rendermode="InteractiveServer" />

Lifecycle events

The Blazor component lifecycle consists of several methods that allow developers to execute code at specific points during a component's lifecycle. The lifecycle methods can be overridden to perform other operations in components during component initialization and rendering. Here are the key lifecycle methods:

• OnInitialized / OnInitializedAsync: Called when the component is initialized. It's a good place to perform any setup work for the component.
• OnParametersSet / OnParametersSetAsync: Called each time the component's parameters are set. This can happen after the component is first initialized or when the parent component re-renders and passes new parameters.
• OnAfterRender / OnAfterRenderAsync: Called after the component finishes rendering. It's a good place to perform any post-rendering logic, such as interacting with JavaScript.
• ShouldRender: Called to determine whether the component should re-render. By default, it returns true, but you can override it to return false if you want to prevent the component from re-rendering.
• Dispose / DisposeAsync: Called when the component is being disposed of. It's a good place to release any resources that the component is holding onto.

These lifecycle methods provide a structured way to manage the state and behavior of Blazor components throughout their lifecycle.