PageTitle doesn't display for SSR pages in mixed render mode app

marinasundstrom commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

Info: Investigation shows that this is related to enhanced navigation and DOM preservation. See comment.

I have a Blazor Server app with mixed render modes, SSR and WebAssembly (Auto). Some pages are server-rendered, and a couple of them have dynamic components (WebAssembly Auto) that set the title depending on content.

In App.razor, I have added render mode to the HeadOutlet:

<HeadOutlet @rendermode="@RenderMode.Auto" />

Upon navigating to to a page, PageTitle is then only updated/rendered for the pages with dynamic components setting them, but not the server-side rendered pages.

They instead default to their address:

The <title> element is not even rendered in <head></head>.

Expected Behavior

That PageTitle works in components of all modes a in mixed render mode app.

Even if HeadOutlet has the @rendermode="@RenderMode.Auto" the PageTitleof SSR pages should be rendered.

Steps To Reproduce

Create a Blazor Server app.

Update App.razor:

<HeadOutlet @rendermode="@RenderMode.Auto" />

Create a page component which has a dynamic component that declares a PageTitle.

Exceptions (if any)

No response

.NET Version

8.0.100-rc.2.23421.3

Anything else?

No response

marinasundstrom commented 1 year ago

Upon investigating it further... This seems to be connected to the enhanced navigation and DOM preservation in the case of SSR.

The title is in the request but isn't applied.

When you do a full navigation to the page the title is correct initially. Then it switches to localhost:1234/products/soap

MackinnonBuck commented 1 year ago

Yeah, this seems like another example of https://github.com/dotnet/aspnetcore/issues/49613 rearing its head again. I think we should aim for a fundamental fix for this that doesn't require any extra APIs or annotations.

SteveSandersonMS commented 1 year ago

@marinasundstrom @MackinnonBuck Are you sure this has something to do with DOM preservation or enhanced nav? I don't think it does, since the same issue will still occur even if you disable those via:

Blazor.start({
    ssr: { disableDomPreservation: true }
});

Instead, I think what happens is:

<HeadOutlet @rendermode=...> prerenders, emitting the correct title into the response
Then the interactive runtime starts and re-runs <HeadOutlet>
But if the current page is not interactive, then there is no <PageTitle> anywhere in the circuit/runtime, and so <HeadOutlet> updates the page's title to nothing

So really I think this is an issue with interactive HeadOutlet believing that it should actively remove any existing title from the page if none was specified via PageTitle.

marinasundstrom commented 1 year ago

@SteveSandersonMS You are right. I was further looking into it and DOM preservation doesn't explain it.

The problem is that the title gets removed when the render mode kicks in on a SSR page where PageTitle is not interactive.

Doing a complete navigation hints about this.

MackinnonBuck commented 1 year ago

I've looked into this a bit more. PageTitle is actually working as designed. If you add a separate <title> element directly to the <head>, then that acts as the default title instead of "localhost...".

However, note that all interactive components immediately replace their prerendered content. If the <HeadOutlet> is interactive, its content will get replaced with that of any interactive <HeadContent> or <PageTitle>. Since there are no interactive <HeadContent> or <PageTitle> components on the page, the <HeadOutlet> renders the default content (which includes whatever the default title is).

For now, we would recommend that <HeadContent> be used without an interactive render mode to avoid this problem.

ghost commented 1 year ago

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

marinasundstrom commented 1 year ago

@MackinnonBuck Ok. I’ll have to find a workaround then.

My case was a product listing page. I wanted to title to reflect the state of the interactive component.

I can probably set the title from JavaScript.

ghost commented 8 months ago

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

MackinnonBuck commented 7 months ago

When addressing this issue, we should also consider the case where the <PageTitle> gets set via streaming update as reported in https://github.com/dotnet/aspnetcore/issues/52689.

mkArtakMSFT commented 7 months ago

Closing as a dupe of https://github.com/dotnet/aspnetcore/issues/51132

SteveSandersonMS commented 5 months ago

I'm reopening this issue because I don't think it's best understood as a duplicate of https://github.com/dotnet/aspnetcore/issues/51132

My reasoning is that there might not be a completely general solution for #51132 since not all possible section usage will even make sense in a mixed rendermode scenario. And it's potentially complex enough that it would be expensive to address to any extent.

But just finding a standalone solution for PageTitle may be much more practical. If this is the main thing that's causing trouble for people, there's a good argument for addressing this limitation on its own.

SteveSandersonMS commented 5 months ago

@dotnet/aspnet-blazor-eng I've removed loads of labels, milestone, etc. so this goes back into triage.

mkArtakMSFT commented 5 months ago

Parking this in the same milestone as https://github.com/dotnet/aspnetcore/issues/51132. Let's see if we can actually solve the more general problem tracked by that issue, and if not, then try to solve the PageTitle case as a special one.

dotnet / aspnetcore