Demo on how to dynamically switch from client to server side mode by appending ?mode=server
to the url.
This commit summarizes the necessary changes.
Blazor (ASP.NET Core hosted)
Project, then change the Startup
class of the .Server
Project to enable server side features.
This doesn't have adverse effects on Client Side Blazor but enables the Server Side services.
For that you need to have services.AddServerSideBlazor();
in ConfigureServices
and endpoints.MapBlazorHub();
in Configure
HttpClient
that is provided in DI in Client Side by default. Server Side doesn't register it by default so we detect this and then register an HttpClient
in DI that behaves similiar for compatibility
// Server Side Blazor doesn't register HttpClient by default
if (!services.Any(x => x.ServiceType == typeof(HttpClient)))
{
// Setup HttpClient for server side in a client side compatible fashion
services.AddScoped<HttpClient>(s =>
{
// Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it.
var uriHelper = s.GetRequiredService<NavigationManager>();
return new HttpClient
{
BaseAddress = new Uri(uriHelper.BaseUri)
};
});
}
index.html
(for which i couldn't see an easy way) or using a small piece of JS to decide which file to load.
First, move the /wwwroot/Index.html from the client to the server /Pages/_Host.cshtml and update the App tag:
<app>
@(await Html.RenderComponentAsync<BlazorDualMode3.Client.App>(RenderMode.ServerPrerendered))
</app>
<script id="blazorMode"></script>
<script>
document.getElementById("blazorMode").src = window.location.search.includes("mode=server") ? "_framework/blazor.server.js" : "_framework/blazor.webassembly.js";
</script>