Server-side rendering with Blazor WebAssembly

Is your feature request related to a problem? Please describe.

I have the following requirements for my app:

1. No WebSockets (so no Blazor Server)
2. Server-side rendering (very SEO-sensitive app)
3. I want to use Blazor WebAssembly

I wonder if Blazor can suit them all.

Describe the solution you’d like

It almost works after the following steps:

1. Install the hosted version of blazorwasm template app.

   dotnet new blazorwasm --hosted -o HostedWasm
   

2. Copy _Hosted.cshtml from blazorserver template to the Pages folder.
3. Change endpoints.MapFallbackToFile("index.html") to endpoints.MapFallbackToPage("/_Host") in Startup.cs of the server
4. Change <script src="_framework/blazor.server.js"></script> to <script src="_framework/blazor.webassembly.js"></script> in _Host.cshtml

Now if you dotnet run the server you will be able to navigate template pages with prerendered HTML.

But there is a problem: there is no way to initialize the state of components before the first render. For example, if I store counter value in the memory cache and save it on each increment, then after page refresh I will see pre-rendered value from the cache… and then 0 (uninitialized component state)

[javiercn]

@guardrex sounds fine to me, just want to make sure you have the content available.

[Andrzej-W]

@mifopen you can look here https://github.com/Andrzej-W/BlazorWebAssemblyWithPrerendering This is my very old experiment with Blazor and it will not work now, but you can find a solution for screen flickering after initial prerendering. “Magic” is here: https://github.com/Andrzej-W/BlazorWebAssemblyWithPrerendering/blob/master/BlazorWebAssemblyWithPrerendering.Client/Pages/FetchData.razor Of course it is possible to implement a similar algorithm in the layout and eliminate flickering in a whole application.

Issues related to my experiment https://github.com/dotnet/aspnetcore/issues/14836, https://github.com/dotnet/aspnetcore/issues/14956

Please note that this is used to eliminate screen flickering only and not to transfer state. To transfer very small state I use data-xxx attributes on body. On the client I use JS interoperability to read attribute value. You can use similar technique to transfer more data - simply embed some JSON text during prerendering.