Which render mode is my component using?

.NET 8’s render modes for Blazor give you lots of ways to run your Blazor components.

But with this choice comes complexity, and it’s not always obvious which mode a given component is using at a specific moment in time.

Say you opt to use Blazor’s Auto render mode, where your component is rendered initially using Blazor Server (while WASM downloads to the browser), then Blazor WASM thereafter.

With this mode your component may actually run in one of three different ways.

• Prerendering (server)
• Interactive Server
• Interactive WebAssembly

It’s handy to know which of those modes you’re in (especially if you have code you only want to run on the client, or server, but not both).

.NET 9 introduces a simple way to figure this out.

In your Razor Components you now have access to a few different properties, namely:

• RendererInfo
• AssignedRenderMode

RendererInfo exposes two properties:

• Name
• IsInteractive

Say you have a simple component like this:

@page RenderInfoDemo
@rendermode InteractiveAuto

<h3>Render Info</h3>

<ul>
    <li>Name: @RendererInfo.Name</li>
    <li>Is Interactive: @RendererInfo.IsInteractive</li>
    <li>Assigned Render Mode: @AssignedRenderMode</li>
</ul>

When you first view this component, it will be prerendered on the server, and those properties will look like this:

• Name: Static
• Is Interactive: False
• Assigned Render Mode: Microsoft.AspNetCore.Components.Web.InteractiveAutoRenderMode

This tells you the current mode (static, non-interactive) but also, the render mode the component will use after prerendering.

In this case the component will then render again, either using Blazor Server (if your app doesn’t spin WASM up quickly enough) or Blazor WASM.

And you’ll see something like this:

• Name: WebAssembly
• Is Interactive: True
• Assigned Render Mode: Microsoft.AspNetCore.Components.Web.InteractiveWebAssemblyRenderMode

Or the Blazor Server equivalent.

In Summary#

You don’t have to guess which render mode your components are using any longer.

Use the new properties on the ComponentBase class to quickly see where your code is running, and whether it’s being rendered ‘interactively’.