In uno scenario in cui dobbiamo garantire un'alta scalabilità, e magari non abbiamo a disposizione una CDN, il modo migliore per limitare il numero delle richieste al server è quello di abilitare il caching client side dei contenuti statici, quali file JavaScript o CSS.
Questo porta benefici non solo a noi, come gestori del sito web, ma anche ai nostri visitatori, visto che il loro browser tenderà a riutilizzare questi file senza che venga effettuata alcuna richiesta HTTP.
Questa funzionalità è facilmente attivabile in ASP.NET Core nel file startup.cs:
app.UseStaticFiles(new StaticFileOptions() { OnPrepareResponse = x => x.Context.Response.Headers.Add( HeaderNames.CacheControl, "public,max-age=86400") });
In questo modo, infatti, stiamo istruendo il middleware responsabile di servire file statici di aggiungere alla risposta un header di tipo cache-control con i seguenti valori:
- public indica che la risorsa è da considerarsi pubblica, e pertanto può essere memorizzata dal browser nella cache locale e condivisa con tutte le sessioni;
- max-age=86400 specifica che questo contenuto può essere mantenuto in cache per i successivi 86400 secondi, ossia 24 ore.
Il risultato sarà che, per ogni file statico che serviremo, per esempio un file JavaScript, esso rimarrà in memoria per 24 ore sul browser client, che così non dovrà scaricarlo nelle successive richieste.
Sebbene questo strumento funzioni egregiamente, esso presenta un problema nel momento in cui modifichiamo il file, perché normalmente i client non avranno alcuna informazione in merito e pertanto continueranno a utilizzare la versione vecchia. Un trucco per poter risolvere questo problema è quello di appendere al nome del file una querystring fittizia (/myfile.js?aaa=bbbccc), che possiamo variare a piacimento.
ASP.NET Core supporta in maniera automatizzata questo scenario grazie a un tag helper che si appoggia al tag html script:
<script src="~/js/myfile.js" asp-append-version="true"></script>
Grazie all'attributo asp-append-version="true", ASP.NET calcolerà in automatico un hash in base al contenuto del file, e lo aggiungerà in querystring:
<script src="/js/myfile.js?v=nlqvGfU..."></script>
Al variare del contenuto, varierà anche l'hash, producendo a tutti gli effetti un nuovo URL e facendo pertanto sì che i browser non possano più utilizzare quanto messo in cache in precedenza.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Creare un'applicazione React e configurare Tailwind CSS
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Definire stili a livello di libreria in Angular
Miglioramenti nelle performance di Angular 16
Eseguire i worklow di GitHub su runner potenziati
C# 12: Cosa c'è di nuovo e interessante
Usare un KeyedService di default in ASP.NET Core 8
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare QuickGrid di Blazor con Entity Framework
Utilizzare Copilot con Azure Cosmos DB