Micro Frontends in Action With ASP.NET Core - Universal Rendering With Blazor WebAssembly Based Web Components

In the last two posts of this series on implementing the Micro Frontends in Action samples in ASP.NET Core, I've focused on Blazor WebAssembly based Web Components as a way to achieve client-side composition. As a result, we have well-encapsulated frontend parts which can communicate with each other and the page. But there is a problem with the client-side rendered fragments, they appear after a delay. While the page loads, the user sees an empty placeholder. This is for sure a bad user experience, but it has even more serious consequences, those fragments may not be visible to search engine crawlers. In the case of something like a buy button, it is very important. So, how to deal with this problem? A possible answer is universal rendering.

• Server-Side Routing via YARP in Azure Container Apps
• Composition via YARP Transforms and Server-Side Includes (SSI)
• Composition via Blazor WebAssembly Based Web Components
• Communication Patterns for Blazor WebAssembly Based Web Components
• Universal Rendering With Blazor WebAssembly Based Web Components

What Is Universal Rendering?

Universal rendering is about combining server-side and client-side rendering in a way that enables having a single codebase for both purposes. The typical approach is to handle the initial HTML rendering on the server with help of the server-side composition and then, when the page is loaded in the browser, seamlessly rerender the fragments on th