Una delle principali rivoluzioni in ASP.NET Core 8 sono le nuove modalità di rendering di Blazor. Se inizialmente Blazor è stato concepito per la realizzazione di Single Page Web Application, infatti, l'idea sta gradualmente migrando verso l'adozione di questo framework come vero e proprio motore di rendering per ogni tipo di pagina, sia statica che interattiva.
Ci occuperemo di questi concetti nel corso dei prossimi script, ma per ora vogliamo partire dal caso più semplice di tutti: renderizzare pagine statiche. Può sembrare limitativo, ma oltre al fatto di essere una necessità ancora incredibilmente diffusa (pensiamo a tutti i siti che mostrano contenuti editoriali, per esempio), serve anche ad aiutarci a comprendere il nuovo modello di rendering introdotto in .NET 8.
Per prima cosa, possiamo creare un nuovo progetto di tipo Blazor Web App, sia tramite Visual Studio o con DotNet CLI:
dotnet new blazor -n SampleStatic
Se a questo punto avviamo l'applicazione, e proviamo a visualizzare la pagina "Weather", noteremo un comportamento assolutamente analogo a quello delle precedenti versioni: la pagina si carica immediatamente, mostra per un istante il messaggio "Loading..." (magari possiamo aumentare il delay nel codice per visualizzarlo più chiaramente), poi finalmente appaiono le previsioni del tempo.
Sembrerebbe una classica pagina di Blazor Server, renderizzata tramite SignalR, ma in realtà quello che sta accadendo è molto diverso: se guardiamo nel network inspector, noteremo come non ci sia alcuna connessione WebSocket aperta con il server, al contrario di ciò che accadrebbe con Blazor Server.
Tutto ciò è possibile tramite la tecnica dello Stream Rendering, che possiamo attivare con l'attributo apposito a inizio pagina:
@page "/weather" @attribute [StreamRendering] <---- <PageTitle>Weather</PageTitle> <h1>Weather</h1> ... @code { private WeatherForecast[]? forecasts; protected override async Task OnInitializedAsync() { // Simulate asynchronous loading to demonstrate streaming rendering await Task.Delay(3000); ... } }
Ciò che accade dietro le quinte è che la pagina è renderizzata interamente lato server, e fornita al client con una singola richiesta. Ma, a differenza di un rendering tradizionale, il codice HTML viene generato due volte: prima e dopo l'await di OnInitializedAsync.
Il primo rendering viene immediatamente visualizzato dal browser, e contiene il markup con la scritta "Loading...". Il server, a questo punto però, non chiude la richiesta come ci aspetteremmo, ma mantiene aperta la connessione fino al termine dell'await, inviando il markup modificato al browser.
Un codice JavaScript lato client fa sì che questo venga interpretato e utilizzato per rimpiazzare le corrispondenti sezioni nella pagina.
Per accorgerci della differenza con lo StreamRendering disattivato, possiamo semplicemente commentare l'attributo, e vedremo la pagina apparire correttamente, ma solo dopo i tre secondi di attesa dettati da Task.Delay.
In conclusione, StreamRendering è un sistema estremamente leggero per servire pagine statiche, dando la possibilità di restituire un HTML parziale all'utente prima che il contenuto vero e proprio sia finalmente caricato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Creare una libreria CSS universale: i bottoni
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Gestire la cancellazione di una richiesta in streaming da Blazor
Utilizzare gRPC su App Service di Azure
Utilizzare Azure AI Studio per testare i modelli AI
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Cancellare una run di un workflow di GitHub
I più letti di oggi
- Webcast 'Visual Web Developer Express 2005: costruire applicazioni con ASP.NET 2.0'
- pronti per #netconfit? ci vediamo domani alle 9:30 in #microsofthouse
- Gestire il colore CSS con HWB
- .NET Alerts Software Development Kit
- Creare un overload del metodo Sum di LINQ che somma i TimeSpan
- Navigare la struttura visuale di un UIElement fino a recuperare l'elemento logico in Silverlight 3.0
- Consultare il registro delle operazioni sul portale di Windows Azure
- tra poco webcast #aspilive su #Windows10, #vs2015 e #UWP. seguici su https://aspit.co/Win10-Live
- Introduzione al nuovo tipo TimeOnly di .NET
- Eseguire un servizio WCF con privilegi minimi