StreamRendering on first page continue to render after navigation

[mattyas]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When using @Attribute [StreamRendering(true)] on the landing page or one of its component, the page continue to refresh after navigating to a subpage, replacing the page or part of the page.

30df6324-6fd5-4e0b-922f-f355dd06e0c2.webm

Expected Behavior

1. That the page you navigate to not blend with the page you left
2. That it is possible to cancel an OnInitializedAsync with the help of a cancellation token when it is no longer rendered on the page, stopping the long running request or pollling. (A workaround for this except on the landing page is to listen to httpContext.RequestAborted)

Steps To Reproduce

Create new template:

change weather forcast delay to 5000ms

        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(5000);

and replace the home page with the following.

@page "/"
@attribute [StreamRendering(true)]
<PageTitle>Home</PageTitle>

<h1>Hello, world @Id!</h1>

Welcome to your new app.

@code {

    private int Id { get; set; }
    protected override async Task OnInitializedAsync()
    {
        for (Id = 0; Id < 10; Id++){
            await Task.Delay(1000);
            StateHasChanged();
        }
    }
}

Full sample can be found here

Exceptions (if any)

No response

.NET Version

8.0.100-rc.1.23455.8

Anything else?

No response

[marinasundstrom]

I would say that it is expected behavior for Stream Rendering. If you don't return from the OnInitializedAsync the request will not end.

I don't know the details about how Blazor handles it with enhanced navigation. But it doesn't seem that it ends the request when "navigating". Again, I don't think it is a bug.

Stream Rendering uses HTTP Streaming - streaming data back in the same connection. Keeping the request open.

[mattyas]

@marinasundstrom that Stream Rendering (sending template sections to replace on the page after it is rendered), replaces sections on other pages must be a bug.

The sample use case in Blazor is to show a response from a slow service and while it is loading show loading.

Lets say you have a service that gives the current weather in a city and that it is really slow (think seconds).

You build a simple app that shows the weather in the selected city with SSR and the first page will show City A.

A user navigates to the home page and it will directly show City A loading...
They click on City B in the menu, Blazor makes a new fetch to show Page B that shows the weather for City B and then the user will directly see City B loading...

Then the api call to get the City A weather finishes and the user will get City A: on their screen.
A few seconds later the api call to get City B weather finishes and the user will get City B:

That City A page that we navigated away from before it finished loading it dependencies can replace the City B page must be a bug since there is no CancellationToken available to abort the OnInitializedAsync call for the City A page.

If there is no way to prevent this, SSR can't be used if you want to be able to switch page before it is rendered completely.

[marinasundstrom]

@mattyas To my knowledge, the approach has always been to let the component implement IDisposable, new up a CancellationTokenSource which can provide you a CancellationToken. Trigger cancellation in the Dispose method by invoking Cancel on the CancellationTokenSource.

I do agree that a built in CancellationToken would be nice though. I don't know the rationale for not implementing that.

Perhaps this is even more relevant now with Stream Rendering and Enhanced navigation.

[mattyas]

@marinasundstrom, tried that. The problem is that the Dispose on the landing page will not get called until the OnInitializedAsync has finished, so it can't be used to cancel the OnInitializedAsync.

[marinasundstrom]

@mkArtakMSFT What is your take on this?

[SteveSandersonMS]

Definitely looks like a bug! I'll investigate.