Cache rules: what a deploy makes users download again
Only the changed entry chunk gets a new name, so a returning user re-downloads about 70 kB gzipped instead of everything. index.html is revalidated (usually a tiny 304 Not Modified) and config.json is fetched fresh. The favicon has a short ordinary cache because its name has no hash.
A client-side React app is a folder of static files, so any static host can serve it, as long as it answers unknown paths like /products/42 with index.html (the SPA fallback) and caches hashed assets for a year while always revalidating index.html; Vercel, Netlify and nginx in Docker each express those two rules in their own config.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the Netlify files for a Vite app with React Router: an SPA fallback and long caching for /assets/*.
Write an nginx server block for an app deployed under /shop/ (Vite base: "/shop/").
Explain it without notes
Why does reloading /products/42 give a 404 on some hosts while clicking a link to it works?
Describe the caching strategy for a Vite build and why it's safe.
Walk through a multi-stage Dockerfile for a React app served by nginx.
What happens to users with an old tab open when you deploy, and how do you handle it?
Preview
Console
Nothing logged yet.Expected console output
/index.html => no-cache
/assets/index-D9PM2J-I.js => public, max-age=31536000, immutable
/assets/Chart-CC2n_YEU.js => public, max-age=31536000, immutable
/assets/index-nqMpL4T3.css => public, max-age=31536000, immutable
/config.json => no-store
/favicon.svg => public, max-age=3600
after deploy, not from the long cache: /index.html /assets/index-Bd1YY8Ma.js /config.json /favicon.svg