Blazor Prerendering
Inleiding
Voor een web applicatie komt het erop neer dat via de browser een web server voor jou aan de slag gaat. Alles wordt inclusief de gewenste gegevens door de web server “gerendered” naar HTML en vervolgens naar de browser gestuurd (meer over Blazor render modes in deze post.)
Er kan naast het renderen ook “geprerendered” worden waarbij de web server alvast dingen naar de client prerendert. Daar achteraan komt het uiteindelijke “renderen”. Bijvoorbeeld omdat gegevens uit een Web API nog niet meteen beschikbaar zijn.
In deze post gaan we in op wat prerenderen is en waarom men dat wil en hoe je het uit kunt zetten. We maken gebruik van de voorbeeldpagina’s in Visual Studio 2022. We lichten het één en ander toe aan de hand van een voorbeeld project dat pages / componenten bevat met verschillende render modes. Zie deze repository voor de voorbeeldcode.
SEO
Het renderen naar HTML is meestal niet het enige wat een web server moet doen. Het optuigen van een web socket SignalR-connectie en het versturen van WASM (en een .NET Runtime met allerlei bijbehorende bestanden) zijn bijvoorbeeld dingen die een web server in het geval van een Blazor web applicatie ook nog moet doen.
Dit alles kan voor o.a. zoekmachines (Google, Bing, DuckDuckGo, Yahoo etc.) te lang duren. Zo kan een zoekmachine je website signaleren, maar het ziet de gegevens niet die het graag wil hebben omdat de web server nog bezig is met van alles en nog wat.
Het resultaat is dat de zoekmachine jouw website nog even laat voor wat het is. Je website is voor een zoekmachine niet geoptimaliseerd (=SEO, Search Engine Optimization) waardoor de website een lagere ranking krijgt in de zoekresultaten van de zoekmachine. Prerenderen kan helpen voor het doen verbeteren van de SEO.
Prerendering
Bij Prerendering wordt twee keer gerendered. De web server prerendert datgene wat het al heeft naar de client (de webbrowser van de gebruiker).
De web server is mogelijk nog lang niet klaar, maar er is al wel iets waar bijvoorbeeld een zoekmachine iets aan heeft met een gunstige SEO als gevolg.
De web server gaat na de prerendering het renderen doen. De web server stuurt voor een tweede keer dingen naar de client die nu wel beschikbaar zijn zoals bijvoorbeeld de gegevens van een aangeroepen Web API.
Het prerenderen en het renderen kan leiden tot een flikkerend, onrustig scherm. Je kunt het prerenderen uitschakelen als je een rustig beeld voor de gebruiker wil en SEO niet tot minder van belang is.
Weather.razor
We lichten het één en ander toe aan de hand van component / scherm Weather.razor (terug te vinden in server project RenderModes in folder Pages in deze repository).
We geven voor de component onderstaande render mode op waardoor gebruik wordt gemaakt van server side rendering met een SignalR-Web Socket-connectie:
@rendermode RenderMode.InteractiveServer
Er wordt met deze render mode ge-“prerendered“. We zetten in de Browser developer tools de Performance op Slow 3G zodat het één en ander beter bekeken kan worden:
en we zien onderstaande schermen achter elkaar verschijnen:
Bij zowel het prerenderen als het renderen wordt functie OnInitializedAsync() aangeroepen.
Functie OnInitializedAsync() roept de gesimuleerde Web API aan en bij het prerenderen verschijnen temperaturen die in fractie van een seconde vervangen worden door de temperaturen die het gevolg zijn van daaropvolgende renderen. Het prerenderen en renderen kan leiden tot een flikkerend, onrustig scherm.
Render modes met / zonder prerenderen
Voor elke render mode kan via de Blazor @rendermode-directive ingesteld worden of wel of niet geprerendered moet worden:
// Interactive WebAssembly
@rendermode
InteractiveWebAssembly
// Interactive WebAssembly zonder prerendering
@rendermode
@(new InteractiveWebAssemblyRenderMode(prerender: false))
// Interactive Auto
@rendermode
InteractiveAuto
// Interactive Auto zonder prerendering
@rendermode
@(new InteractiveAutoRenderMode(prerender: false))
//Interactive Server
@rendermode
RenderMode.InteractiveServer
//Interactive Server zonder prerendering
@rendermode
@(new InteractiveServerRenderMode(prerender: false))
Slot
In deze post zijn we ingegaan op wat prerenderen is. Prerenderen is nodig voor o.a. een optimale SEO (Search Engine Optimization) zodat je website een hoge ranking krijgt in de zoekresultaten van de zoekmachine. Het prerenderen en het renderen kan leiden tot een flikkerend, onrustig scherm.
Voor elke Blazor render mode kan het prerenderen uitgezet worden. Je kan dat instellen bij de Blazor directives. Het prerenderen kun je uitzetten als je een rustig beeld voor de gebruiker wil en SEO niet tot minder van belang is.
Zie verder deze post van Steven Siegel waarin hij in detail ingaat op wat prerenderen is. Meer over Blazor render modes in deze post. In deze repository kun je de code terugvinden die in deze post ter sprake kwam.
Hopelijk ben je met deze posting weer wat wijzer geworden en ik hoop je weer terug te zien in één van mijn volgende blog posts. Klik op de Home-button om te zien wat ik nog meer geschreven heb…