Server side vs client side
To be clear Razor Components can execute on either, server side
or client side. The Razor Component doesn't have to change.
The server side execution sends DOM updates to the browser via SignalR.
Where as the client side executes the Razor Component inside the browser using WebAssembly.
There are advantages and disadvantages of each hosting model.
One of the downsides of server side is reduced scalability. The server has to manage all the work that the normal server would plus the work of the browser for each connection.
A big client side advantage is offloading much of the work from the server to the browser, thus your site will scale better. Yet to do this one has to download more code from the server and thus it takes longer and you have slower first page loads.
Dynamic Dual Mode
Wouldn't it be nice to have both fast first page load and allow for more scalability by running on the client?
With the timewarp-blazor template we load the site on the first visit to run from the server so you have fast load times and quick interactivity. Yet we also load/cache the client side version in parallel without blocking the main window.
Upon refreshing of the screen or on subsequent visits to the site we transition to client-side execution. Thus offloading the burden from the server and improving scalability.
This is accomplished by using a flag stored in
localStorage. On the first visit to the site this flag won't exist and thus we use server-side execution and launch the loading of the client side version which adds the flag.
Upon next visit the
localStorage value will exist and we launch client side execution which should be cached.
Specify execution side
You may want the ability to easily toggle the execution side. This allows for testing of both sides, and currently the debugging experience on server side is much better.
For this ability we added another
ExecutionSide that allows you to specify where to run the Razor Components. This can be changed in your browser devtools to client/server and then reload the page.
To see this in action, our base timewarp-blazor template is running on azure
To get started with Dynamic Dual Mode in your own app install the templates
dotnet new --install TimeWarp.AspNetCore.Blazor.Templates
and create and run new application
dotnet new timewarp-blazor -n MyBlazorApp dotnet run
Happy Dualing :)
Tags: dotnetCore RazorComponents Blazor C#
Author: Steven T. Cramer