HeadOutlet not working when using WebAssembly and Serverside Pre Render.

Describe the bug

Using HeadOutlet / PageTitle component to change the page title in WebAssembly with Serverside-Prerender, theres no way to get the title prerendered. First page render always renders the server-side title (or none if title is not specified at serverside). If title is specified, title is also not updated after webassembly boots.

Expected behavior

We should get server-side <title> tag when doing serverside prerender that reflects the page of the current url before any client-side code is executed. This is very importante for SEO, social sharing excerpts and title prerender.

To Reproduce

_Host.cshtml:

<head>
<title>Host: Server</title> 
...
 <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
</head>

note on _Host.cshtml <title> tag: If we do not include the <title>...</title> in the <head> on html source, after webassembly boots the client side updates the page title, and we get no prerendered title. If we keep the <title> tag on the _Host.cshtml, we get this “generic” title from serverside and the first page never reflects/update to the webassembly <PageTitle> component.

Index.blazor:

@page "/"
<PageTitle>Main page: Blazor</PageTitle>

SomePage.blazor:

@page "/somepage"
<PageTitle>Some Page</PageTitle>

On first render, the title will show the server one: “Host: Server” when navigating normally the title will change just fine. If we refresh (F5, CTRL+R) at /somepage the title will display: “Host: Server” again.

If I change _Host.cshtml to:

<head>
...
 <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

a client-side error is returned:

Error: Found malformed component comment at Blazor:{"prerenderId":"3642bc95455b4cfa882b1fa6b3204edf"}

Repro:

I included a repo for your convenience at: https://github.com/Bartmax/HeadOutletBug

Further technical details

.NET SDK (reflecting any global.json):
 Version:   6.0.100-rc.1.21463.6
 Commit:    e627d556a1

see more technical info

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.22468
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.100-rc.1.21463.6\

Host (useful for support):
  Version: 6.0.0-rc.1.21451.13
  Commit:  d7619cd4b1

Issue Analytics

State:
Created 2 years ago
Comments:12 (12 by maintainers)

Top GitHub Comments

1reaction

SteveSandersonMScommented, Oct 5, 2021

Cool, thanks for confirming, and for raising this point. It made us realise that more docs are needed.

0reactions

Bartmaxcommented, Oct 5, 2021

I can confirm that using the Layout trick works as expected. I’ll close this now as you created a more specific issue at #37293 Thanks @SteveSandersonMS this was really helpful.