Blazor in .NET 8: nieuwe render modes

Blazor, onderdeel van .NET 8, biedt verschillende renderopties die een duidelijke impact hebben op performance en gebruikerservaring. Deze modi bepalen hoe HTML-content wordt gegenereerd en aan de browser van de klant wordt geleverd. In deze post bekijken we de verschillende render modes in Blazor en hoe ze werken.

Maar eerst: wat is rendering in Blazor? Het verwijst naar het genereren van HTML-content vanuit Blazor-components, die daarna in de browser van de klant worden weergegeven. Dit proces interpreteert Razor-syntax en C#-code om de uiteindelijke HTML-output te produceren, samen met CSS- en JavaScript-bestanden.

Er zijn meerdere manieren om content in Blazor te renderen. Elke aanpak past bij andere scenario’s.

Belangrijke Blazor render modes

Prerendering:

Bij prerendering wordt de HTML volledig op de server gegenereerd en naar de browser van de klant gestuurd. Deze modus verbetert de initiële laadtijd door een statische snapshot van de content aan te bieden. Die wordt later uitgebreid met interactiviteit zodra de Blazor-app aan de clientzijde draait via WebAssembly, of opnieuw verbinding maakt met de server via SignalR.

WebAssembly betekent dat code efficiënt in webbrowsers kan draaien. Het biedt ontwikkelaars een manier om gecompileerde code uit te voeren, waardoor performance-intensieve taken rechtstreeks in de browser kunnen gebeuren. Met Blazor laat WebAssembly Blazor-applicaties volledig in de browser draaien, waardoor .NET-code aan de clientzijde kan worden uitgevoerd zonder dat voor elke interactie een server nodig is.

Server-Side Rendering (Blazor Server):

HTML wordt op de server gerenderd. Interactie van de gebruiker met de user interface wordt terug naar de server gestuurd, waarna nieuw gerenderde HTML naar de client wordt teruggestuurd. De realtime verbinding tussen client en server gebeurt via SignalR. Sociale mediaplatformen draaien op realtime updates en interacties, zoals likes, reacties en live feeds. Het realtime communicatiemodel van Blazor Server, ondersteund door SignalR, is daardoor geschikt voor applicaties die onmiddellijke gebruikersfeedback en updates nodig hebben zonder paginarefreshes. Dat sluit goed aan bij het dynamische en interactieve karakter van sociale mediaplatformen.

Client-Side Rendering (Blazor WebAssembly):

De Blazor-applicatie en de components worden gedownload in de browser van de klant. De logica van de component en de HTML worden rechtstreeks in de browser verwerkt met WebAssembly. Voor interactiviteit aan de clientzijde is geen permanente serververbinding nodig.

• Voordelen: volledige interactiviteit met offline mogelijkheden.
• Gebruikt de rekenkracht van de client, waardoor de server minder belast wordt.
• Wanneer gebruiken: voor rijke, interactieve gebruikerservaringen die onmiddellijke feedback vragen.
• Wanneer offline functionaliteit nodig is. Interactive Server-Side Rendering Mode:

Dit gaat over realtime interactiviteit, waarbij de volledige levenscyclus van de component, van rendering tot gebruikersinteractie, door de server wordt beheerd. Deze modus wordt meestal gebruikt in Blazor Server-applicaties waar interactiviteit cruciaal is.

• Voordelen: realtime interactiviteit.
• Verlaagt de vereisten aan de clientzijde.
• Maakt het eenvoudiger om state en logica aan de serverzijde te beheren.
• Wanneer gebruiken: interactieve applicaties waarbij het nuttig is om state op de server te bewaren.
• Om resources en complexiteit aan de clientzijde te beperken.
• Wanneer realtime updates essentieel zijn, met gebruik van de rekenkracht van de server.
• Aandachtspunten: latency bij slechte netwerkverbinding.
• Deployment: Azure SignalR Service Automatic Rendering

Deze modus start door de pagina op de server te renderen voor een snelle laadtijd, en schakelt daarna op de achtergrond over naar client-side rendering via WebAssembly.

• Voordelen: combineert de snelle initiële laadtijd van server rendering met de rijke interactiviteit en offline mogelijkheden van client-side rendering.
• Flexibiliteit: past de rendering mode automatisch aan om performance en gebruikerservaring te optimaliseren.
• Zorgt voor een vlotte overgang van server- naar clientrendering zonder merkbare wijzigingen aan de server.
• Wanneer gebruiken: balans tussen server- en clientverwerking, met optimalisatie van laadtijden en interactiviteit.

Interactivity type: none

Static server rendering: maar zonder websocketverbinding en zonder WebAssembly-download. HTML wordt op de server opgebouwd en de client krijgt de afgewerkte HTML. Button clicks of events worden niet afgehandeld.

Interactivity type: Server

Interactiviteit via SignalR, met een websocketverbinding. Geen interactiviteit wanneer offline.

Interactivity type: Web Assembly

Interactiviteit via WebAssembly. Handlers in de code worden gedownload naar de browser van de klant. Interactiviteit blijft mogelijk wanneer offline.

WebAssembly Standalone App

Interactiviteit via WebAssembly. Handlers in de code worden gedownload naar de browser van de klant. Interactiviteit blijft mogelijk wanneer offline.

Interactivity type: Auto

Interactiviteit start via websockets, terwijl op de achtergrond de wasm-bestanden worden gedownload. Wanneer de pagina opnieuw wordt bezocht, worden de wasm-bestanden gedetecteerd en gebruikt in plaats van websockets.

Deployment

Blazor Server:

• Azure App Service: kan meer resources vragen door server-side geheugengebruik per gebruiker, ongeveer 50KB tot 500KB per gebruiker.
• Voorbeeld: een server van 16GB met gemiddeld 100KB geheugengebruik per gebruiker. Stel dat 5GB gereserveerd is voor OS en andere services, dan blijft er 11GB beschikbaar. Berekening: 11GB / 100KB per gebruiker = 110.000 ondersteunde gebruikers.
• Azure SignalR Service: neemt het hosten van SignalR-verbindingen over van de server, waardoor de applicatie eenvoudiger kan schalen.
• Biedt serverless verbindingen voor kostenefficiënte, on-demand scaling.
• Handelt session stickiness automatisch af.
• Biedt connection management en auto-reconnect features.

Conclusie

De nieuwe render modes van Blazor in .NET 8 bieden flexibiliteit en performance-optimalisatie voor een brede waaier aan applicaties. Of je nu snelle laadtijden, SEO of rijke interactiviteit belangrijk vindt, er is een rendering mode die bij je behoefte past. Door de juiste modus te kiezen, kan je de gebruikerservaring verbeteren, de applicatieperformance verhogen en de serverbelasting verminderen. Voor statische content is SSR de aangewezen oplossing. Voor sterk interactieve applicaties is client-side rendering met WebAssembly ideaal. En als je het beste van beide werelden nodig hebt, biedt automatic rendering een goede balans.