Blazor Web Apps in .NET 8

see ASP.NET Core Blazor render modes for more details.

.NET 8 has introduced a new paradigm for Blazor development, called the Blazor Web App (BWA). The BWA supports multiple rendering modes at a component level.

  • Static: All files are pre-rendered on the server into static HTML, CSS, and JavaScript
  • Interactive Server: Like Blazor Server, the component is rendered on the server, and then a SignalR connection is used to allow interactions and updates.
  • Interactive WebAssembly: Like Blazor WebAssembly, the component is rendered in the browser, and interactions and updates are handled client-side.
  • Interactive Auto: The component is rendered initially on the server, and a SignalR connection is used to allow interactions and updates. Meanwhile, the WebAssembly code is downloaded in the background, and when ready, any new loads will be rendered in WebAssembly. This provides the best of both worlds, with quick startup times and quicker responses on future loads. However, as of the current release, InteractiveAuto might not always work correctly for GeoBlazor maps, but stay in server-side rendering even after the WASM runtime has loaded. The map component still works, but if you want to guarantee client-side rendering of GeoBlazor, we suggest using InteractiveWebAssembly.

Render modes are set by defining an attribute on a Razor Component.

<MyComponent @rendermode="InteractiveServer" />

This can be set for all pages in your application by setting the mode on the Routes and HeadOutlet components in App.razor. You can set the mode for a specific page by adding the @rendermode attribute at the top of the page.

@page "/my-map-page"
@rendermode InteractiveWebAssembly

Note that as of .NET 8, any pages and components labeled with InteractiveWebAssembly or InteractiveAuto must be located in the .Client WebAssembly project that comes with the BWA template, or live in a Razor Class Library. Only static and server-rendered components can live in the main BWA server project.

GeoBlazor-specific Rules

GeoBlazor does not support the Static rendering mode. Event handlers and other updates are not supported by Blazor in Static mode, and this makes the rich interactivity of GeoBlazor impossible.

If you want to leave the top level Routes and pages as statically rendered, you can still use GeoBlazor components, but you must define a wrapper component around your MapView, and set the rendermode attribute on that wrapper to an Interactive option.

MapWrapper.razor

<MapView>
    <Map></Map>
</MapView>

@code {
    // interactive code with the map
}

StaticPage.razor

@page "/my-static-page"

<MapWrapper @rendermode="RenderMode.InteractiveAuto" />

You should never set the @rendermode directly on any GeoBlazor components. If you try to set the rendermode directly you will get an error. If you add a MapView to a static page directly, you will get no error, but the map will fail to render.

As mentioned above, InteractiveAuto render mode does not appear to work correctly for GeoBlazor components, likely due to their constant connection for event handling. For client-side rendering, use InteractiveWebAssembly.