Prerendered Razor Components
Explore how to implement prerendered Razor components in Blazor applications. This lesson guides you through configuring a Blazor WebAssembly app to render components during the initial page load, enhancing performance and enabling better search engine indexing. Understand the necessary code changes in both client and server projects to achieve seamless prerendering.
We'll cover the following...
By default, when we make a request to retrieve a page in a Blazor application, the Razor component we have requested is not loaded right away. Once the markup of the container page is loaded, only then is the markup of the Razor component loaded into the page.
Although it doesn't usually take long to load a Razor component, sometimes we would still want to load it at the same time as the page that hosts it. For example, this would enable our Razor components to be indexed by a search engine. Otherwise, if the content is not available in the initial response, it may not be indexed.
In Blazor, this can be achieved by prerendering. To demonstrate how prerendering works, we have the following setup. Here, we have a hosted Blazor WebAssembly app that is prerendered and delivered to the browser along with the main page response.
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
</Project>