CODEWITHSUNDEEP
blazorblazor-server-sideblazor-client-sideblazor-webassemblyasp.net-blazor
DarcyThomas
DarcyThomas

Reputation: 1288

How to seamless switch between Blazor Serverside and WebAssembly?

So as we know Blazor is pretty cool.

However the 2 versions each have their pros and cons.

WebAssembly takes a long time for first load and Serverside consumes resources (connection ports and ram)

Is there a way to have a website load a server side Blazor, the once the WebAssembly stuff has loaded, switch over. The two versions would share all of the razor components, so should look the same.

Is there an supported way of doing this (in .Net5 perhaps)? Or some work around people have had success with?

Upvotes: 2

Views: 1345

Answers (3)

Rémi Gaudin
Rémi Gaudin

Reputation: 514

Now in .NET 8 you can do exactly what you're asking, using the new Blazor render modes. You just need to use the new directive on your page or component:

@rendermode InteractiveAuto

This will render your page/component in the server for the very first load, in the meantime it will load the required WebAssembly packages in the background, and for all the next loads it will render it in the client side using WebAssembly.

For more info, see here.

See also my answer to this more general question about using Blazor Server and Blazor Client/WebAssembly inside the same application.

Upvotes: 1

henon
henon

Reputation: 2508

There is an implementation of hot switch between BSS and WASM called HybridBlazor. It is explained in the article https://itnext.io/blazor-switching-server-and-webassembly-at-runtime-d65c25fd4d8 and the source code is on github https://github.com/jdtcn/HybridBlazor

The idea is to load both a BSS and a WASM application at the same time but hide the WASM application until the switch is done. Since both blazor implementations subscribe and handle events window.addEventListener is overwritten to allow only the BSS implenentation to handle events until the user switches. The switch could be done silently on page navigation for example.

Upvotes: 1

GioviQ
GioviQ

Reputation: 95

The project Blazor Boilerplate on GitHub development branch has a feature to runtime switch between Blazor server and wasm. The two versions share the same UI and all features.

Upvotes: 2

Related Questions