Cache-busting en versiebeheer

Heb je je website of applicatie ooit bijgewerkt en vervolgens gemerkt dat gebruikers nog steeds de oude versie zien?

Dit veelvoorkomende probleem wordt vaak veroorzaakt door caching. Cache busting is een techniek waarmee je browsers en cachingservers (zoals CDN's) dwingt de nieuwste versie van je bestanden te laden in plaats van verouderde, gecachte kopieën aan te bieden.

Caches zijn geweldig voor de prestaties, maar ze kunnen oude inhoud blijven bewaren.

Wanneer een browser of CDN een bestand cacht (zoals een afbeelding, CSS of JavaScript), gebeurt dat meestal op basis van de URL van het bestand en specifieke HTTP-headers (zoals Cache-Control). Als de URL nooit verandert, merkt de cache mogelijk nooit dat de inhoud van het bestand is bijgewerkt.

Een van de eenvoudigste methoden voor cache busting is het gebruik van een querystring. Je voegt een unieke identificatie (zoals een versienummer of tijdstempel) toe aan het einde van de URL van een bestand.

Wanneer de querystring verandert, ziet de browser of het CDN dit als een volledig nieuwe URL, waardoor het bijgewerkte bestand van de bronserver wordt opgehaald.

Zo kun je een querystring gebruiken om de cache voor een CSS-bestand te omzeilen:

<link rel="stylesheet" href="/css/style.css?v=1.0.1">

Als je style.css bijwerkt, wijzig je de versie: /css/style.css?v=1.0.2. Hiermee geef je caches het signaal dat er een nieuwe versie beschikbaar is.

Hoewel querystrings eenvoudig zijn, hebben ze nadelen:

• Sommige proxyservers negeren querystrings bij het cachen, waardoor verouderde inhoud kan worden aangeboden.
• Elke wijziging van de querystring maakt een nieuwe cachevermelding, waardoor caches mogelijk gefragmenteerd raken.
• Bestaande gecachte versies worden niet benut als slechts een klein deel van het bestand is gewijzigd.

Voor kritieke assets hebben robuustere methoden vaak de voorkeur.

Bij een krachtigere techniek wordt een hash van de inhoud van het bestand rechtstreeks in de bestandsnaam opgenomen.

main.css wordt bijvoorbeeld main.d41d8cd9.css. Als er zelfs maar één teken in main.css verandert, is de hash volledig anders en ontstaat er een unieke bestandsnaam.

Buildtools zoals Webpack of Gulp automatiseren dit proces vaak. Ze genereren een unieke hash op basis van de inhoud van het bestand en hernoemen het tijdens de implementatie.

Deze methode zorgt ervoor dat alleen echt nieuwe bestanden worden opgehaald en dat oude, ongewijzigde bestanden onbeperkt in de cache kunnen blijven staan, waardoor de cache optimaal wordt benut.

Cachevernieuwing is niet alleen bedoeld voor statische bestanden. Voor dynamische inhoud of API's helpt versiebeheer bij het beheren van wijzigingen.

Bij versiebeheer van API's wordt de URL van het eindpunt van de API gewijzigd (bijvoorbeeld van /api/v1/products naar /api/v2/products) of wordt een aangepaste HTTP-header gebruikt (bijvoorbeeld X-API-Version: 2).

Effectieve cachevernieuwing combineert vaak meerdere strategieën:

• Hashing automatiseren: Gebruik buildtools voor statische assets.
• Agressief cachen: Stel lange cacheduur in voor bestanden met een hash.
• Versiebeheer voor API's: Gebruik dit bij wijzigingen die niet achterwaarts compatibel zijn in dynamische inhoud.
• Voorwaardelijke aanvragen: Gebruik ETag of Last-Modified voor kleine, frequente updates.

Het doel is om op betrouwbare wijze actuele inhoud te leveren en tegelijk het aantal cachetreffers te maximaliseren.

We hebben geleerd dat cachevernieuwing en versiebeheer essentieel zijn om actuele inhoud te leveren in omgevingen waarin caching wordt gebruikt.

Door technieken zoals querytekenreeksen of, robuuster, hashing van bestandsinhoud voor statische assets te gebruiken, en voor API's expliciet versiebeheer toe te passen, zorg je ervoor dat gebruikers altijd de nieuwste functies en oplossingen ervaren zonder dat dit ten koste gaat van de prestaties.