Detecting server pre-rendering in Blazor server app

In .Net 9, there is a new API called RendererInfo that can detect render mode at runtime.

@if (RendererInfo.IsInteractive)
{
    <button class="btn btn-primary" @onclick="IncrementCount">Counter</button>
}
else
{
    <p>Loading...</p>
}

Do not use IJSRuntime for determining the render mode, it is not reliable as mentioned here.

You can use the IHttpContextAccessor.HttpContext.Response.HasStarted property to check whether the application is pre-rendering or not. HasStarted specifies that the response header has been sent to the client. If HasStarted is set to false, it means that the application is still pre-rendering and client connection is not yet established.

If server-rendering, you can check if javascript is available.

public static bool IsPreRendering(this IJSRuntime runtime)
{
    // The peculiar thing in prerender is that Blazor circuit isn't yet created, so we can't use JSInterop
    return !(bool)runtime.GetType().GetProperty("IsInitialized").GetValue(runtime);
}

The accepted response (using the HttpContextAccessor) is a terrible advice. There is no guarantee as to what the HttpContext is after the pre-rendering and rendering. As such, you can't rely on it. Sometimes it will work, sometimes not.

If there is lots of traffic, the HttpContext will probably refer to some other unrelated request.

If it's a WASM project, you can do this:

@using System.Runtime.InteropServices

var isPrerendering = RuntimeInformation.ProcessArchitecture != Architecture.Wasm;

To detect pre-rendering on Blazor server, I recommend to act according to the official documentation, here is quote:

Blazor Server apps that prerender their content call OnInitializedAsync twice:

• Once when the component is initially rendered statically as part of the page.

• A second time when the browser establishes a connection back to the server.

To prevent developer code in OnInitializedAsync from running twice, see the Stateful reconnection after prerendering section.

In 2024, this issue is still lurking around the corner. So here's my approach to dealing with the matter.

Note: I am using Visual Studio Community 2022 Version 17.9.2 with the latest .NET 8 Blazor Web App template.

Let's create a wrapper component that determines how often a given component has been rendered. This wrapper has two parameters:

@code {
    [Parameter, EditorRequired] public Type Component { get; set; } = default!;
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

Since the wrapper will be initialized twice, we need a static counter for the target component type (a dictionary is a great choice). Each time the wrapper is initialized, we increment that counter. After the first render, we set the counter to the value 2 to avoid overflowing the static integer value. Once we know the wrapper is no longer pre-rendering, we render the child content.

Here's the code for the wrapper component:

NoPrePrender.razor

@*
    This component ensures that the child content
    is rendered ONCE after pre-rendering is done.
*@
@if (IsNotPreRendering)
{
    @ChildContent
}
else if (PreRendering != null)
{
    @PreRendering
}
@code {
    [Parameter, EditorRequired] public Type Component { get; set; } = default!;
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public RenderFragment? PreRendering { get; set; }
    [Parameter] public EventCallback OnPreRendering { get; set; }
    [Parameter] public EventCallback OnRendered { get; set; }

    private static System.Collections.Concurrent.ConcurrentDictionary<Type, int> State = new();

    private int InitCount
    {
        get => State.TryGetValue(Component, out var value) ? value : 0;
        set => State[Component] = value;
    }

    private bool IsNotPreRendering => InitCount != 0 && InitCount % 2 == 0;
    private bool IsPreRendering => InitCount == 0 || InitCount % 2 != 0;

    protected override async Task OnInitializedAsync()
    {
        if (Component != null)
        {
            InitCount++;
            if (IsPreRendering && OnPreRendering.HasDelegate)
            {
                await OnPreRendering.InvokeAsync();
            }
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            InitCount = 2; // avoid perpetual incrementing and trouble down the road
            if (OnRendered.HasDelegate)
                await OnRendered.InvokeAsync();
        }
    }
}

In another component (e.g., Home.razor), you can now use this wrapper component as shown below:

Home.razor

<NoPreRender Component=typeof(Home) OnPreRendering=@(() => Console.WriteLine("Pre-rendering..."))>
    <AuthorizeView>
        <Authorized>
            <Redirection Url="/admin-dashboard" Delay="2000" Message="Redirecting to the dashboard..." />
        </Authorized>
        <NotAuthorized>
            <Login />
        </NotAuthorized>
    </AuthorizeView>
</NoPreRender>

Make sure to replace the content with what makes sense to you.

you want to render on intiliaze Javascript e.g with using localstorage in customauthenticationstateprovider. can use it;

<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />

https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-8.0&pivots=server

in a shared location (the Client project?), create an interface IRenderInfo:

public interface IRenderInfo { bool IsPrerendering { get; } }

in the server Project, implement the interface and register a Singleton in DI:

public class ServerRenderInfo : IRenderInfo { bool IsPrerendering => true; }
builder.Services.AddSingleton<IRenderInfo, ServerRenderInfo>();

in the client Project, implement the interface and register a Singleton in DI:

public class ClientRenderInfo : IRenderInfo { bool IsPrerendering => false; }
builder.Services.AddSingleton<IRenderInfo, ClientRenderInfo>();

inject IRenderInfo in a Component:

@inject IRenderInfo renderInfo
Is Prerendering: @renderInfo.IsPrerendering

.NET9 introduced a new API to detect the current RenderMode using RenderInfo.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#detect-rendering-location-interactivity-and-assigned-render-mode-at-runtime[runtime](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#detect-rendering-location-interactivity-and-assigned-render-mode-at-runtime)

protected override void OnInitialized()
{
    if(RendererInfo.IsInteractive == false)
    {
        // Pre-Rendering
    }
    else if (OperatingSystem.IsBrowser())
    {
        // WebAssembly
    }
    else
    {
        // Server
    }
}

I'm adding static bool field "ClientClass.PrerenderMode = false" to the SomeClient class

A have

• Host (depend: client)
• Shared
• Client

client did not set bool.

on server "_Host.cshtml" @{ ClientClass.PrerenderMode = true; }

PS: If you have net core server with Blazor Webassembly