Bereits seit längerem ist es bei vielen Browsern üblich, statische Inhalte wie JavaScript/CSS und Bilder lokal zwischenzuspeichern. In der Regel geschieht dies anhand des Namens: Der Browser lädt beispielsweise die Datei style.css beim ersten Besuch herunter und speichert sie lokal auf dem Computer. Beim nächsten Aufrufen der Seite prüft der Browser zuerst seinen Cache, findet die style.css und ruft sie gar nicht erst vom Server ab – denn sie liegt ja bereits lokal vor. Grundsätzlich ist das sinnvoll: Ladezeit und Serverlast werden reduziert, außerdem sparen mobile Nutzer einiges an Datenvolumen.
Was passiert bei Änderungen?
Nun hat der Nutzer unsere style.css beispielsweise am 01.09.2016 in seinen lokalen Cache geladen. Einen Tag später (02.09.2016) aktualisieren wir unsere Seite, wodurch einige Zeilen CSS-Code in der Datei geändert und hinzugefügt werden. Besucht unser Nutzer nun die Seite erneut, erkennt der Browser die Änderung möglicherweise nicht und lädt die alte Datei aus dem Cache. Die Folge: Das neue Design wird nicht angezeigt. Möglicherweise sieht die Seite sogar kaputt aus, weil alte CSS Klassen/Ids durch neue ersetzt wurden.
Es gibt diverse Möglichkeiten, dagegen vorzugehen. Beispielsweise kann der Server im HTTP-Header das Änderungsdatum der Datei senden. Liegt dies vor dem Datum der Datei im Cache, wird sie neu geladen. Als einfache und zuverlässige Methode hat sich jedoch das Verwenden eines URL-Parameters bewährt. Die Browser berücksichtigen diese mit, da CSS- und JavaScript Dateien auch dynamisch generiert werden können. In der Regel generiert man den Hashwert der Datei und übergibt diesen als v-Parameter für Version, wobei die Bezeichnung keine Rolle spielt:
<link rel="stylesheet" href="/css/style.css?v=1wp5zz4e-mOPFx4X2O8seW_DmUtePn5xFJk1vB7JKRc" />
Idealerweise generiert man den Hash beim deployment. So wird sichergestellt, dass er immer dem Stand der jeweiligen Datei entspricht.
Wie wird cache busting in ASP.NET Core verwendet?
Da dieses Problem jeden Webentwickler betrifft, hat das Framework eine smarte Lösung an Board: Das Hilfsattribut asp-append-version übernimmt die gesamte Arbeit, sofern es auf true gesetzt wurde.
Ein Beispiel:
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
ASP.NET Core wird den Hash der Datei beim Start generieren und ihn als v-Parameter an den Dateiname anfügen, wie im obigen Beispiel zu sehen. Dieses Attribute kann bei CSS-Stylesheets, JavaScript-Dateien und sogar Bildern verwendet werden:
<img src="~/images/image.jpg" asp-append-version="true" />