Why is ClientService Null on Refresh in .NET 8 Blazor with InteractiveAuto Mode?

The behavior you’re experiencing is common when using Blazor’s pre-rendering. When a Blazor WebAssembly–hosted or Blazor Server app is pre-rendered (for example, with @rendermode InteractiveAuto), not all injected services are immediately available; some are only assigned once the application becomes interactive on the client.

Here are two ways to deal with this:

---

1. Use a Null Check and Defer Logic Until After Render

Since your service may be null during pre-rendering, you can delay any logic that depends on it until after the app has gone interactive. For example, use the OnAfterRenderAsync lifecycle method:

RAZORCopied
@page "/example"
@rendermode InteractiveAuto

@code {
    [Inject]
    public ClientService? ClientService { get; set; }
    
    private bool _initialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && ClientService != null)
        {
            _initialized = true;
            // Now it's safe to use ClientService, e.g., call an API or initialize data.
            await ClientService.InitializeAsync();
        }
    }
}

In this approach, any calls that depend on ClientService are delayed until after the app has switched to its interactive mode.

---

2. Disable Pre-rendering if It’s Not Needed

If you don’t need pre-rendering and would prefer that your component’s dependencies are available immediately on load, you can disable it. To do this, remove or adjust the @rendermode directive from your component:

RAZORCopied
@page "/example"
<!-- Remove @rendermode InteractiveAuto if pre-rendering is not desired -->

@inject ClientService ClientService

@code {
    protected override async Task OnInitializedAsync()
    {
        // ClientService is guaranteed to be available.
        await ClientService.InitializeAsync();
    }
}

With pre-rendering disabled, the DI container sets up your ClientService right away, and you won’t encounter the null issue.

---

Summary

• Pre-rendering Scenario: The service is null initially because dependency injection isn’t fully in place until the app becomes interactive. Use the OnAfterRenderAsync lifecycle method (with a null check) to handle logic that depends on the service.
• No Pre-rendering: Remove pre-rendering if it isn’t necessary, ensuring your injected service is immediately available.

Choose the approach that best fits your app’s requirements.