Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > ASP.NET Core 5

Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly

di Marco De SanctisMarco De Sanctis, in ASP.NET Core 5,

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:

Figura 1

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.

Figura 2

6 pagine in totale: 1 2 3 4 5 6
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

Le novità di Entity Framework (Core) 7

I più letti di oggi

In evidenza

Misc