Scoped service property set by middleware has no value when accessed from Blazor component

[marcel2215]

In my .NET 8.0 Blazor Server app, I have the following scoped service:

public class Service1
{
    public string? Value1 { get; set; }
}

And a middleware that initializes the Value1:

public class Middleware1(RequestDelegate next)
{
    public async Task InvokeAsync(HttpContext context, Service1 service1)
    {
        service1.Value1 = "Hello, world!";
        await next(context);
    }
}

The service is properly registered and the middleware is added to the request pipeline before Blazor pages.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddScoped<Service1>();
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

app.UseMiddleware<Middleware1>();
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
app.Run();

Finally, I have a Blazor component Home.razor that tries to access the Value1 by dependency-injecting Service1:

@page "/"
@rendermode InteractiveServer
@inject Service1 Service1

<PageTitle>Home</PageTitle>
<h1>@(Service1.Value1 ?? "Unknown")</h1>

When I launch the app and navigate to the home page, "Hello, world!" appears for less than a second before it is replaced by "Unknown".

Screen.Recording.2024-08-19.at.20.10.06.mov

I assume that the Value1 can be accessed during pre-rendering (and SSR), but why does it go away when switching to interactive rendering?

How should I deal with this problem? Is there a workaround to pass a value from middleware to an interactive Blazor component?

The source code in case you need it:
https://dropover.cloud/f3577f