What is the right way to prerender Blazor WebAssembly?

[mifopen]

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, I have two questions:

1. Is it the "right" way to do the prerendering of Blazor WebAssembly? I see nothing about this in the docs.
2. How to share DI between server-side and client-side? Now, if you navigate / and then going to /fetchdata everything will be fine, but if you then use F5 (e.g refresh) on /fetchdata path, you will see

InvalidOperationException: Cannot provide a value for property 'Http'
on type 'HostedWasm.Client.Pages.FetchData'. There is no registered
service of type 'System.Net.Http.HttpClient'.

To fix it you need to copy HttpClient configuration code from Client/Program.cs to Server/Startup.cs

[jonhilt]

Hey @mifopen I've explored this (and some of the issues you raise) in a couple of blog posts...

https://jonhilton.net/blazor-wasm-prerendering/
https://jonhilton.net/blazor-wasm-prerendering-missing-http-client/

I believe this is the "right" way to handle Blazor WASM prerendering (but that's speculation on my part, informed by scraping together information from various MS blog posts etc.)

The bit I'm now exploring is how to make Azure B2C auth work properly when prerendering this way :-)

[Charlotte-br560]

Regarding prerendering Blazor WebAssembly:
Your approach seems reasonable and effective, but it's not extensively documented. While it gets the job done, consider keeping an eye on official updates or community best practices.

Sharing Dependency Injection (DI) between server-side and client-side:
To resolve the InvalidOperationException, you can share HttpClient configuration code from Client/Program.cs to Server/Startup.cs. This ensures consistent DI between server and client, preventing issues like the one encountered.

Additionally, if you're interested in further optimizing your web crawling efforts, you might explore integrating Crawlbase into your project. It offers powerful web crawling capabilities, potentially enhancing your application's functionality and performance.