Blazor prerendering is a process where web page elements are built and compiled on the server and static HTML is hosted in WebAssembly (client side). When Razor pages load, components are prerendered at the same time. This process improves page loading by making it faster for SPAs (single page applications), which improves search engine optimization.
Follow the steps below to create a prerender Blazor WebAssembly app.
Create a new Blazor WebAssembly application using the .NET CLI.
dotnet new blazorwasm -o BlazorPrerendering.Client Add a new empty ASP.NET Core Web App to host the project.
dotnet new web -o BlazorPrerendering.Server
The solution should now look like this.
Now, add the WebAssembly (client side) project reference in the host server project file (BlazorPrerendering.Server.csproj) and also include the NuGet package (Microsoft.AspNetCore.Components.WebAssembly.Server) using NuGet Package Manager.
[BlazorPrerendering.Server.csproj]<Project Sdk="Microsoft.NET.Sdk.Web">
. . .
. . .
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\BlazorPrerendering.Client\BlazorPrerendering.Client.csproj" />
</ItemGroup>
</Project>Configure the host in the host server project Startup.cs file.
[BlazorPrerendering.Server/Startup.cs]namespace BlazorPrerendering.Server
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddSingleton<HttpClient>(sp =>
{
// Get the address that the app is currently running at
var server = sp.GetRequiredService<IServer>();
var addressFeature = server.Features.Get<IServerAddressesFeature>();
string baseAddress = addressFeature.Addresses.First();
return new HttpClient { BaseAddress = new Uri(baseAddress) };
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
// Call UseDeveloperExceptionPage on the app builder in the Development environment.
app.UseDeveloperExceptionPage();
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
// Call UseBlazorFrameworkFiles on the app builder.
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
// Change the fallback from the index.html file
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}Now, you need to create a folder called Pages in the root of the host server project and create a razor page file called _Host.cshtml with the following code.
[BlazorPrerendering.Server/Pages/_Host.cshtml]@page "/"
@namespace BlazorPrerendering.Server.Pages
// Need to enable Tag Helpers on the Razor Page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Prerendering client-side Blazor</title>
<base href="~/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorPrerendering.Client.styles.css" rel="stylesheet" />
</head>
<body>
<component type="typeof(BlazorPrerendering.Client.App)" render-mode="WebAssemblyPrerendered" />
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>Now, remove the default static wwwroot/index.html file from the Blazor WebAssembly client project.
Delete the following line in Program.cs in the client project.
[BlazorPrerendering.Client /Program.cs]builder.RootComponents.Add<App>("#app");
Now run the application, and you will find the prerendered Blazor WebAssembly app.
Refer to “Prerender and integrate ASP.NET Core Razor components” for more details.
Share with