Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
Come sappiamo, negli ultimi anni il trend principale nello sviluppo web è stato quello di realizzare applicazioni sempre più interattive, il cui modello è molto più vicino a quello client-server che al classico sito web: stiamo ovviamente parlando di Single Page Application, che si contraddistinguono per il fatto che gran parte della logica, rendering HTML incluso, è implementata client side.
In un simile scenario, il server, invece, ha tipicamente solo lo scopo di esporre una serie di API che vengono consumate tramite chiamate XmlHttpRequest per manipolare dati, che di solito vengono poi rappresentati sul browser tramite un engine di templating che, come il resto del codice relativo all'interfaccia utente, gira esclusivamente sul browser.
Questo modello di sviluppo offre innumerevoli vantaggi, primo fra tutti la possibilità di implementare interfacce notevolmente dinamiche e del tutto simili alle applicazioni native che usiamo sui nostri device o computer. Tuttavia, proprio questa dinamicità è causa di diversi problemi sotto l'aspetto della Search Engine Optimization (SEO). Sebbene i crawler più evoluti, come Google Bot o Bing Bot, siano in grado di renderizzare e indicizzare correttamente siti web di questo tipo, in ogni caso la situazione è lontana dall'essere ideale:
- spesso il markup indicizzato non è perfettamente fedele a quello emesso;
- siti di questo tipo aumentano il costo in termini di Craw Budget, cosa che può portare a indicizzazioni incomplete o non sempre aggiornate;
- non sono supportati dagli altri motori di ricerca che, sebbene sorgente di traffico più limitato, potremmo comunque avere interesse a supportare.
Data la natura di framework per Single Page Application, anche Blazor WebAssembly ovviamente non fa eccezione a questa regola e, per rendercene conto, è sufficiente provare a invocare la home page del template di default per Blazor in Visual Studio da qualcosa che non sia un browser web, per esempio da PowerShell:
Come possiamo notare dall'immagine, il contenuto semplicemente non viene restituito, perché verrà generato solo una volta che l'applicazione si sarà avviata nel browser. Tutto ciò che vediamo, è il contenuto della pagina di hosting, index.html.
Fortunatamente in Blazor esiste una funzionalità, denominata server side prerendering, che, sebbene non immune da difetti, permette di ovviare a questo problema: l'idea è quella di generare lato server l'HTML iniziale della pagina, così che, quantomeno alla prima richiesta, il contenuto restituito dal server sia la vera e propria pagina HTML, con tutti i suoi contenuti, che poi proseguirà il suo ciclo di vita sul client.
Cerchiamo di capire come sfruttarla e quali sono le complessità aggiuntive che essa porta.
Attivare il Server-side pre-rendering
Iniziamo innanzi tutto con lo sgombrare il campo specificando che l'unica modalità di hosting utilizzabile per server side prerendering è quella su ASP.NET Core. Come possiamo intuire, infatti, questa modalità richiede un server vero e proprio, in grado di interpretare la richiesta e processare la pagina Blazor prima di restituirla al browser. Questo ovviamente ha implicazioni anche dal punto di vista del web hosting, per esempio su Azure: dato che la nostra applicazione non sarà più un semplice sito web statico, avremo bisogno di utilizzare un servizio come Azure App Service, invece che un semplice hosting per static file come lo Azure Storage o Static Web Apps.
Pertanto dovremo ricordarci di impostare la checkbox come in figura, quando creiamo un nuovo progetto Blazor, o convertirlo in modalità ASP.NET Core hosted come abbiamo visto in uno script su queste pagine.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Utilizzare il trigger SQL con le Azure Function
Limitare le richieste lato server con l'interactive routing di Blazor 8
Paginare i risultati con QuickGrid in Blazor
Utilizzare QuickGrid di Blazor con Entity Framework
Eseguire una query su SQL Azure tramite un workflow di GitHub
Creare una libreria CSS universale: Clip-path
Creazione di componenti personalizzati in React.js con Tailwind CSS
Gestione degli stili CSS con le regole @layer
Creare una libreria CSS universale: Cards
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Evitare il flickering dei componenti nel prerender di Blazor 8
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database