Live Chat Icon For mobile
Live Chat Icon

How do I prerender a Blazor WebAssembly application to static files?

Platform: Blazor| Category : General, WebAssembly

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.

To set up prerendering for a hosted Blazor WebAssembly app:

  1. Create the Blazor web Assembly App with core Hosted. Here solution name is BlazorHosted.

  2. Delete wwwroot/index.html file from the Blazor WebAssembly Client project.

  3. In the Client project, delete the following lines in Program.cs:

    - builder.RootComponents.Add<App>("#app");
    - builder.RootComponents.Add<HeadOutlet>("head::after");

  4. Add the _Host.cshtml and _Layout.cshtml files to the Pages folder in the Server project. These files are already included in the Blazor Server template and can be obtained from there.
    Make the following changes to the _Host.cshtml file:

    • Modify the namespace based on APP namespace as BlazorHosted.Client.
    • Update the render-mode as ‘WebAssemblyPrerendered’ in host.cshtml
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
  5. Make the following changes to the _Layout.cshtml file:
    Update the Pages namespace at the top of the file to match namespace of the Server app’s pages like this,
    @namespace BlazorHosted.Server.Pages

    Add @using directive for the Client project at the top of the file:
    @using BlazorHosted.Client

    Update the stylesheet links to point to the WebAssembly project’s stylesheets. So, make the following changes.
    Remove the following lines
    <link href="css/site.css" rel="stylesheet" />
    <link href="{App Name space}.styles.css" rel="stylesheet" />
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    Add the following lines
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
    Modify the Blazor script source of Server side Blazor:
    <script src="_framework/blazor.webassembly.js"></script>
  6. In the endpoint mapping of the Server project in Program.cs, update the fallback from the index.html file to the _Host.cshtml page.
    Remove the following line
    Add the following line
  7. If the Client and Server projects use one or more common services during prerendering, factor the service registrations into a method that can be called from both projects. For more information, see ASP.NET Core Blazor dependency injection.
  8. Run the Server project. The hosted Blazor WebAssembly app is prerendered by the Server project for clients.

View Sample in GitHub

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.