HTTP Caching — How does it work step by step?

  • clients (in our context, browsers),
  • proxy servers, and
  • origin servers

Two-players: browser and origin server

Cache-Control from the server

  • no-store prohibits the browser store any cache. It is useful for continually changing sources.
  • no-cache has a misleading name. It actually allows cache, but validation with the origin server is mandatory before using it.
  • max-age helps our browser decide if a resource is considered fresh.
  • must-revalidate instructs the browser to validate a resource on the origin server when it is stale. It usually uses with max-age.

Cache-Control from the browser

Conditional requests from the browser

If-Modified-Since

  1. The browser requests a resource for the first time.
  2. The server response includes a Last-Modified header.
  3. When the browser requests the resource again, it attaches the If-Modified-Since header automatically.
  4. The server validates the time and notices no modifications.
  5. Since there is no modification, the server responds with a 304 status code and other headers, telling the browser to use cache.
  6. When seeing 304, the browser knows it is safe to use cache.

If-None-Match

  1. The browser sends the first request.
  2. The server responds with the resources. An ETag header is added to the response.
  3. When the browser requests the same resource, an If-None-Match header is attached, along with ETag's value received in the previous response.
  4. The server validates the ETag and detects if the resource has been modified.
  5. If the resource remains the same, the server sends a 304 status code response with other headers.
  6. The browser knows that it is safe to use its cache.
# Strong ETag
"33a64c34d8d3832b4ac257297d23d99"
# Weak ETag
W/"33a64c34d8d3832b4ac257297d23d99"

Three-players: Browser, proxy server, and origin server

Cache-Control from the origin server

Cache-Control from the browser

  • max-age=10
  • max-stale=10
  • max-age=10
  • min-fresh=5

Let’s put everything together

Further reading

--

--

--

a coder 🧑🏻‍💻

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ScorpFolio and NFT Tracker

Burrow Has Been Audited!

What are Header Files in C

Using AWS and Microservices For FinTech Applications

Shipping Docker Container Data

Life Long Software System Maintainability — Part 1

A brief tour of Python 3.7 data classes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Carson

Carson

a coder 🧑🏻‍💻

More from Medium

Longest String with All Prefixes

How to Use Searching by Source Code Productively

How to secure your Node-Red Instance

Introducing Surfboard