How Cache-Control: no-cache Works

Cache-Control: no-cache is an HTTP header directive that forces browsers and intermediate caches to validate the resource with the origin server before using a cached version. This doesn't mean the resource can't be cached; ratherit must be revalidated each time it is requested.

Let's go through an example of how this works in practice.

Initial Request

1. First Request by Browser:

   The browser makes an initial request to the server to fetch a resourcefor examplea user profile picture.

   GET /profile.jpg HTTP/1.1
   Host: example.com
   

2. Server Response:

   The server responds with the resource and includes the Cache-Control: no-cache directive.

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12345
   Cache-Control: no-cache
   ETag: "abc123"
   

Subsequent Requests

3. Second Request by Browser:

   The browser caches the resource along with its headers. The next time the browser requests the same resourceit must first revalidate it with the server. This is indicated by including the If-None-Match header with the ETag value in the request.

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

4. Server Response (Resource Not Modified):

   If the resource has not changedthe server responds with a 304 Not Modified statusindicating that the cached version is still valid. The response does not include the resource bodysaving bandwidth.

   HTTP/1.1 304 Not Modified
   ETag: "abc123"
   

   The browser continues to use the cached version of the resource.

Handling Resource Changes

5. Server Response (Resource Modified):

   If the resource has changedthe server responds with a 200 OK status and includes the new version of the resource along with a new ETag.

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12346
   Cache-Control: no-cache
   ETag: "def456"
   

   The browser caches the new version of the resource and the new ETag value.

Example Workflow

Here’s a full example demonstrating the Cache-Control: no-cache workflow:

Initial Request and Response:

1. Initial Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   

2. Initial Response:

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12345
   Cache-Control: no-cache
   ETag: "abc123"
   

Subsequent Request and Response (Not Modified):

1. Subsequent Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

2. Not Modified Response:

   HTTP/1.1 304 Not Modified
   ETag: "abc123"
   

Subsequent Request and Response (Modified):

1. Subsequent Request:

   GET /profile.jpg HTTP/1.1
   Host: example.com
   If-None-Match: "abc123"
   

2. Modified Response:

   HTTP/1.1 200 OK
   Content-Type: image/jpeg
   Content-Length: 12346
   Cache-Control: no-cache
   ETag: "def456"
   

Summary

• Cache-Control: no-cache: Forces the browser to revalidate the resource with the origin server before using a cached version.
• Revalidation: The browser includes the If-None-Match header with the cached resource's ETag value.
• Server Response: If the resource is unchangedthe server responds with 304 Not Modified. If the resource is changedthe server responds with the new version of the resource and updates the ETag.