Institute for Web

Caching Strategies & Cache-Control

If you don't understand how HTTP caching works, you will build slow, expensive applications that break when users reload. Bootcamps rarely teach cache headers.

The Immutable Asset Pattern

The standard pattern for modern web apps:

  1. Hash the filename of assets (e.g. app.8f3a1b.css).
  2. Set Cache-Control: public, max-age=31536000, immutable.
  3. Set the HTML file to no-cache so it always fetches the latest pointers to the hashed assets.

Common Mistakes

max-age=0 vs no-cache: no-cache doesn't mean "don't cache", it means "validate with the server before using the cache". no-store means "do not cache".

Interactive Tool: Cache-Control Header Builder

Header String

Cache-Control: public, max-age=31536000

Internal Links