RenderTree in Blazor

We have seen how we develop components, manipulate the UI, build forms, and optimize our components and project for faster and more efficient performance. It’s now time to go deep and learn how Razor components are compiled and how Blazor manipulates the UI you see in the browser.

We will start by learning a bit more about the difference between Single-Page Applications (SPAs) and traditional web apps in terms of how the UI works, then we will go deeper by defining RenderTree in Blazor and what happens to .razor files at compilation. After covering the theory, we will develop a simple component using purely C# and learn about how to take advantage of this advanced scenario, helping us build more performant apps.

This chapter covers some advanced topics that may not be directly relevant for practical applications of Blazor and day-to-day work, but they can help you gain a deeper understanding of how Blazor works under the hood and go through scenarios...

Technical requirements

This chapter uses a new Blazor WebAssembly project called RenderTreeSample and not the original BooksStore project used in other chapters.

The code used is available in the book’s GitHub repository:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_12

How rendering happens in SPAs

What you see in any web app, in the UI, is the result of the rendering process of the HTML code that represents the page or components.

In traditional web apps, when the browser requests the page, the server either sends a full HTML page in the case of static web apps, or, in situations of apps such as ASP.NET MVC, it constructs a full HTML string after doing data and UI manipulation, and then sends it to the client. The browser takes that HTML and renders it as is.

On the other hand, in the case of SPAs, the browser initially sends a request and receives a simple HTML document alongside the JavaScript (JS) libraries, or the DLLs if the framework is Blazor. The browser renders that simple page, then the logic of the JS or .NET library starts to build HTML pieces and injects or replaces them in the UI. This all happens on the browser side through a process known as manipulating the Document Object Model (DOM).

What is the DOM?

Basically, when...

What is RenderTree in Blazor?

While developing components in Blazor and using some bindings, we don’t update the DOM directly. Between our components and the DOM, Blazor creates an in-memory programmatic lightweight object called RenderTree that represents the current DOM’s state.

Due to the nature of RenderTree as a C# object, it’s easy to manipulate its state and content instead of manipulating the DOM directly, because in SPAs, the process of manipulating the DOM is heavy and complex. When a change occurs in the app and it requires the UI to be updated, Blazor updates the state of RenderTree and then compares the updated status with the original one using an advanced diffing algorithm. The algorithm is responsible for identifying the differences between the original state and the new one in an efficient manner. This all happens in RenderTree, rather than in the DOM directly, taking only the differences and applying only what has changed to the DOM, which...

Building a component with RenderTree

Building components can be done using just a .razor file, which is the recommended approach most of the time, but it’s good to learn how to also build them using RenderTree, to learn how things work under the hood. This will help you build better components with Razor. For example, with RenderTree you can control how Blazor determines the changes to render in the UI, which can improve performance in some special cases. We will see an example of this in the Controlling the rendering using the @key directive section.

It’s rare to encounter a scenario where you’re required to use the RenderTree method, and it’s also not recommended, as building complex components is extremely hard with RenderTree compared to .razor files.

To keep things simple, we will build the same little UI with the <h1> tag and <button> and configure it to update its content when we click on the button as we did in the Updating the...

Controlling the rendering using the @key directive

When it comes to rendering collections by iterating over the items and rendering some UI elements, the powerful mechanism of Blazor RenderTree and its diffing algorithm will observe the changes happening to the list (insert, update, and delete) and update the UI accordingly. Blazor assigning and indexing for each item gets rendered in the UI based on the items in the list at runtime. That’s the normal approach for most cases.

Because the sequence numbers are assigned at runtime, Blazor will start sequentially from the first item in the list to the last. So, let’s create a sample component that will simulate the scenario, as follows:

1. In the Pages folder, create a Razor component and call it key-directive-sample.razor.
2. Write the following code inside it:

   @page "/key-directive-sample"<h3>Key Attribute Sample</h3><ul>    @foreach (var item in numbers)  ...

Summary

In this chapter, we went over how Blazor handles the DOM manipulation process using an abstraction layer called RenderTree between the DOM and our components. We went over how things work inside Blazor, then built a component using purely C# with RenderTreeBuilder. Finally, we saw a new directive called @key that helps us have a more efficient rendering process and more predictable output when rendering collections.

So, after building components in the previous chapter, this one has completed the picture and has fed our curiosity. But the most important takeaways of this chapter are as follows:

• Blazor uses RenderTree to track changes in the UI, aggregate them, and apply them to the DOM efficiently.
• RenderTree doesn’t rerender the markup every time an update is made. It only updates what has changed in the UI.
• Use @key whenever you render a list of items, for example, within a foreach loop, to have a better-controlled rendering process.

The next...

Further reading

• What is the DOM? https://en.wikipedia.org/wiki/Document_Object_Model
• More about RenderTrees: https://blazor-university.com/components/render-trees/