HTTP caching headers (ETag, Cache-Control) in Express - Step-by-Step Execution

Concept Flow - HTTP caching headers (ETag, Cache-Control)

Client sends request

↓

Server checks cache headers

↓

Generate ETag for resource

↓

Compare ETag with If-None-Match header

↓

Send 304

↓

Client caches resource

↓

Next request uses cached data if valid

The server uses ETag and Cache-Control headers to tell the client if the resource changed. If not, it sends a 304 status to save bandwidth.

Execution Sample

Express

app.get('/data', (req, res) => {
  const data = JSON.stringify({ message: "cached data" });
  const etag = '"etag123"';
  res.set('Cache-Control', 'private, max-age=10');
  if (req.headers['if-none-match'] === etag) {
    res.status(304).end();
  } else {
    res.set('ETag', etag).send(data);
  }
});

This Express route sends data with ETag and Cache-Control headers, responding 304 if the client's ETag matches.

Execution Table

Step	Request Header If-None-Match	ETag Generated	Condition (If-None-Match === ETag)	Response Status	Response Headers	Response Body
1	none	"etag123"	false	200	Cache-Control: private, max-age=10; ETag: "etag123"	{"message":"cached data"}
2	"etag123"	"etag123"	true	304	Cache-Control: private, max-age=10	none
3	"etag999"	"etag123"	false	200	Cache-Control: private, max-age=10; ETag: "etag123"	{"message":"cached data"}

💡 When If-None-Match matches ETag, server sends 304 to avoid resending data.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
req.headers['if-none-match']	undefined	none	"etag123"	"etag999"
etag	undefined	"etag123"	"etag123"	"etag123"
res.status	undefined	200	304	200
res.body	undefined	{"message":"cached data"}	none	{"message":"cached data"}

Key Moments - 3 Insights

Why does the server send a 304 status instead of the data sometimes?

When the client's If-None-Match header matches the server's ETag (see execution_table step 2), the server knows the client has the latest data and sends 304 to save bandwidth.

What happens if the client sends no If-None-Match header?

The server treats it as no cache and sends the full data with status 200 and ETag header (see execution_table step 1).

Why is Cache-Control header important here?

Cache-Control tells the client how long it can keep the cached data before checking again. It works with ETag to optimize caching (see response headers in all steps).

Visual Quiz - 3 Questions

Look at the execution table, what is the response status when the If-None-Match header equals the ETag?

A 304

B 200

C 404

D 500

💡 Hint

Check the row where Condition is true in the execution_table.

At which step does the server send the full data with ETag header?

A Step 2

B Step 3

C Step 1

D No step

💡 Hint

Look for response status 200 with ETag in the execution_table.

If the Cache-Control max-age was set to 0, how would the client behavior change?

A Client caches data indefinitely

B Client would never cache the data

C Client caches data for 10 seconds

D Client caches data only if ETag changes

💡 Hint

Refer to Cache-Control header meaning in key_moments and execution_table.

Concept Snapshot

HTTP caching uses ETag and Cache-Control headers.
ETag is a unique ID for resource version.
Client sends If-None-Match with ETag to check freshness.
Server replies 304 if unchanged, saving bandwidth.
Cache-Control sets how long client can keep cached data.
Together they improve web performance and reduce load.

Full Transcript

This visual trace shows how HTTP caching headers work in an Express server. The server generates an ETag for the data and sends it with Cache-Control headers. When the client requests the same resource again, it sends the ETag in the If-None-Match header. The server compares this with the current ETag. If they match, the server sends a 304 Not Modified status without the data, telling the client to use its cached copy. If they don't match or no ETag is sent, the server sends the full data with a 200 status and the current ETag. Cache-Control tells the client how long to keep the cached data before checking again. This process saves bandwidth and speeds up loading by avoiding unnecessary data transfer.