Apache, Varnish, Nginx og SPA app: Undgå at cache index.html

SPA står for “Single Page Application”, for den består fysisk kun af een side, nemlig index.html. Dvs. alt der har med brugerfladen at gøre hentes første gang hjemmesiden besøges, og herfra foregår al kommunikation via Ajax kald til en backend.

Inde i index.html filen er der referencer til alt det andet hjemmesiden skal bruge. Disse referencer indeholder ofte det vi kalder “cache busting”. Dvs. at når man har lavet ændringer, sørger man for at filnavne i  referencerne også ændrer sig. Dermed vil browseren tro at der er tale om nye filer, og hente dem påny, i stedet for at hente dem fra sit eget lager (cache).

Udfordringen opstår, når der er lavet ændringer og index.html nu refererer til nye filnavne. De gamle filer eksisterer ikke længere på serveren. Hvis index.html i det tilfælde hentes fra browserens cache, vil alle referencer pege på filer der ikke længere eksisterer.

Med en SPA er det derfor vigtigt at konfigurere både index.html og server, til at instruere browseren i IKKE at cache index.html.

I selve index.html tilføjes disse linier i <head> sektionen:


I Apaches konfiguration tilføjes følgende:

Du kan konstatere om det virker ved at hente filen med wget kommandoen:

Før jeg ændrede apache så wget’s output således ud:

Efter genstart af Apache, ser det således ud:

Det virker…

I mit tilfælde sidder Apache imidlertid bag Varnish HTTP Cache og Nginx som proxy. Jeg tjekker derfor også lige om de nye no-cache headers kommer hele vejen gennem Varnish og Nginx til klienten. Denne gang afvikler jeg derfor wget kommandoen på min egen computer:

Desværre… det ser ud til at Varnish serverer index.html fra sin cache og ydermere mangler ‘no-cache’ som den bagvedliggende Apache ellers sender med.

I Varnish dokumentation læser jeg mig til følgende ændring:

Efter genstart af Varnish ser headerne nu således ud:

Jeg ville også gerne have set en Cache-Control: no-cache, men det må være Nginx der driller.