The Kladde’s two islands run on the server: The browser sends clicks over a connection, the server computes and sends changes back. Blazor can also work differently. With WebAssembly, .NET runs in the browser itself, and a component computes there without asking the server on every click.
In this lesson you build the same small component once as a Server island and once as a WebAssembly island, measure what the browser loads in each case, and decide for the Kladde. This is built in a trial branch, a spike: It answers one question and is not merged afterward. Only a small API and the decision go into the main branch.
What runs in the browser
WebAssembly is a format for programs that every current browser runs, alongside JavaScript. Microsoft ships the .NET runtime as a WebAssembly
file. If a page has a component with @rendermode InteractiveWebAssembly, this happens:
- Prerendering. The server renders the component like any other and sends HTML. The page is visible at once.
- Downloading.
blazor.web.jsrecognizes the marker of a WebAssembly island and loads the .NET runtime (dotnet.native.wasm), the libraries the component needs as.wasmfiles, and data for dates and numbers in different languages. - Starting. .NET starts in the browser, creates the component anew and takes over its place on the page.
- Clicking. A click now runs entirely in the browser. The server learns nothing about it unless the component asks it.
From then on the island costs the server nothing: no connection, no memory per tab. In return, the browser loads megabytes on the first visit, and everything the component does, it does on the person’s device, with all that follows from that.