Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
marinasundstrom opened this issue Aug 22, 2023 · 14 comments
Open
1 task done

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

marinasundstrom opened this issue Aug 22, 2023 · 14 comments
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one Pillar: Complete Blazor Web
Milestone

Comments

@marinasundstrom
Copy link

marinasundstrom commented Aug 22, 2023

Is there an existing issue for this?

  • 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:

Screenshot 2023-08-22 at 20 26 52

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

  1. Create a Blazor Server app.
  2. Update App.razor:
<HeadOutlet @rendermode="@RenderMode.Auto" />
  1. 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

@dotnet-issue-labeler dotnet-issue-labeler bot added the area-blazor Includes: Blazor, Razor Components label Aug 22, 2023
@marinasundstrom
Copy link
Author

marinasundstrom commented Aug 22, 2023

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
Copy link
Member

Yeah, this seems like another example of #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
Copy link
Member

@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
Copy link
Author

marinasundstrom commented Aug 23, 2023

@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.

@mkArtakMSFT mkArtakMSFT added the bug This issue describes a behavior which is not expected - a bug. label Aug 23, 2023
@mkArtakMSFT mkArtakMSFT modified the milestones: .NET 9 Planning, 8.0-rc2 Aug 23, 2023
@MackinnonBuck
Copy link
Member

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
Copy link

ghost commented Aug 28, 2023

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 MackinnonBuck added enhancement This issue represents an ask for new feature or an enhancement to an existing one and removed bug This issue describes a behavior which is not expected - a bug. labels Aug 28, 2023
@marinasundstrom
Copy link
Author

@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
Copy link

ghost commented Dec 20, 2023

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
Copy link
Member

When addressing this issue, we should also consider the case where the <PageTitle> gets set via streaming update as reported in #52689.

@mkArtakMSFT
Copy link
Member

Closing as a dupe of #51132

@mkArtakMSFT mkArtakMSFT closed this as not planned Won't fix, can't repro, duplicate, stale Jan 16, 2024
@mkArtakMSFT mkArtakMSFT added the ✔️ Resolution: Duplicate Resolved as a duplicate of another issue label Jan 16, 2024
@ghost ghost added the Status: Resolved label Jan 16, 2024
@SteveSandersonMS
Copy link
Member

SteveSandersonMS commented Mar 21, 2024

I'm reopening this issue because I don't think it's best understood as a duplicate of #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
Copy link
Member

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

@mkArtakMSFT
Copy link
Member

Parking this in the same milestone as #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.

@marqdouj
Copy link

fwiw, I just started working LocalProtectedStorage so I was using this render mode and reading the store in OnIntializedAsync.

@rendermode @(new InteractiveServerRenderMode(prerender: false))

So I changed the rendermode to InteractiveServer and used OnAfterRenderAsync/FirstRender to read the store; PageTitle now works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components enhancement This issue represents an ask for new feature or an enhancement to an existing one Pillar: Complete Blazor Web
Projects
None yet
Development

No branches or pull requests

5 participants