Nginx: no-cache on index.html, long cache on hashed assets

Without this the browser caches index.html, which contains references
to the current build's JS bundle filename. After a redeploy the new
bundle has a different hash, but the browser still loads the old
index.html → requests the old bundle → may 404 or load stale code.
Symptom: Ctrl+Shift+R required after every update to see the story.

index.html: Cache-Control no-cache/no-store/must-revalidate
JS/CSS/font/image assets: max-age=31536000, immutable (safe because
Vite includes a content hash in every filename)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-05-24 22:04:44 -04:00
parent c6589b7dcf
commit 6682810c00

View File

@ -4,6 +4,20 @@ server {
root /usr/share/nginx/html; root /usr/share/nginx/html;
index index.html; index index.html;
# index.html must never be cached it references hashed asset filenames
# that change on every build. Stale HTML wrong JS bundle broken app.
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
}
# Hashed JS/CSS/image assets are safe to cache forever the filename
# changes whenever the content changes, so there's no stale-file risk.
location ~* \.(?:js|css|woff2?|svg|png|jpg|ico)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
try_files $uri =404;
}
location / { location / {
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
} }