Response headers (Cache-Control, ETag) in Rest API - Step-by-Step Execution

Concept Flow - Response headers (Cache-Control, ETag)

Client sends request

↓

Server processes request

↓

Server adds Cache-Control header

↓

Server adds ETag header

↓

Server sends response with headers

↓

Client caches response based on Cache-Control

↓

Client sends conditional request with If-None-Match

↓

Server compares ETag

Match No↓

Send 304

The client requests data; the server adds Cache-Control and ETag headers to control caching. The client uses ETag to check if data changed, reducing data transfer.

Execution Sample

Rest API

GET /data HTTP/1.1
Host: example.com

HTTP/1.1 200 OK
Cache-Control: max-age=60
ETag: "abc123"

{ "value": 42 }

Client requests data; server responds with Cache-Control and ETag headers and JSON data.

Execution Table

Step	Action	Header Added	Header Value	Client Behavior
1	Client sends GET request	None	None	Request sent to server
2	Server processes request	None	None	Preparing response
3	Server adds Cache-Control	Cache-Control	max-age=60	Client can cache for 60 seconds
4	Server adds ETag	ETag	"abc123"	Client stores ETag for validation
5	Server sends response	Cache-Control, ETag	max-age=60, "abc123"	Client receives data and headers
6	Client caches response	None	None	Stores data and ETag
7	Client sends conditional GET with If-None-Match	If-None-Match	"abc123"	Asks if data changed
8	Server compares ETag	None	None	Checks if ETag matches
9	ETag matches	None	None	Server sends 304 Not Modified
10	Client uses cached data	None	None	No new data downloaded
11	After max-age expires, client sends new GET	None	None	Starts cycle again

💡 Client stops sending conditional requests when cache expires or data changes.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	After Step 7	After Step 9
Cache-Control	None	max-age=60	max-age=60	max-age=60	max-age=60	max-age=60
ETag	None	None	"abc123"	"abc123"	"abc123"	"abc123"
Client Cache	Empty	Empty	Empty	Cached data + ETag	Cached data + ETag	Cached data + ETag
Client Request Header	None	None	None	None	If-None-Match: "abc123"	If-None-Match: "abc123"

Key Moments - 3 Insights

Why does the client send the If-None-Match header?

The client sends If-None-Match with the stored ETag to ask the server if the data has changed. If it matches, the server replies 304 to save bandwidth (see execution_table step 7 and 9).

What happens when Cache-Control max-age expires?

When max-age expires, the client must ask the server for fresh data again, starting a new request cycle (see execution_table step 11).

Why is ETag value quoted like "abc123"?

ETag values are quoted strings to uniquely identify the version of the resource, ensuring exact matching (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution_table at step 7, what header does the client send?

A Cache-Control: max-age=60

B If-None-Match: "abc123"

C ETag: "abc123"

D Authorization: Bearer token

💡 Hint

Check the 'Header Added' and 'Header Value' columns at step 7 in execution_table.

At which step does the server decide to send a 304 Not Modified response?

A Step 5

B Step 8

C Step 9

D Step 11

💡 Hint

Look for the step where the ETag matches and server sends 304 in execution_table.

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

A Client would always revalidate immediately

B Client would never cache data

C Client would cache data longer

D Client would ignore ETag

💡 Hint

Refer to variable_tracker Cache-Control values and client caching behavior.

Concept Snapshot

Response headers control caching:
Cache-Control sets how long client caches data (e.g., max-age=60 means 60 seconds).
ETag is a unique tag for resource version.
Client sends If-None-Match with ETag to check freshness.
Server replies 304 Not Modified if data unchanged.
This saves bandwidth and speeds up responses.

Full Transcript

When a client requests data from a server, the server can include response headers like Cache-Control and ETag. Cache-Control tells the client how long it can keep the data before asking again. ETag is a unique identifier for the data version. The client stores the ETag and later sends it back in an If-None-Match header to ask if the data changed. If the server sees the ETag matches, it sends a 304 Not Modified response, telling the client to use its cached data. This process reduces data transfer and speeds up loading. When the cache time expires, the client requests fresh data again, repeating the cycle.

Practice

1. What is the main purpose of the Cache-Control header in an HTTP response?

easy

A. To indicate the response content type

B. To encrypt the response data for security

C. To specify the server's IP address

D. To tell browsers how long to keep the response data

Solution

1. Step 1: Understand the role of Cache-Control

   The Cache-Control header instructs browsers and caches how long they can store the response data before requesting it again.

2. Step 2: Compare options with Cache-Control purpose

   Only To tell browsers how long to keep the response data correctly describes this behavior. Other options describe unrelated functions.

3. Final Answer:

   To tell browsers how long to keep the response data -> Option D

4. Quick Check:

   Cache-Control = Duration for caching [OK]

Hint: Cache-Control controls data storage time in browsers [OK]

Common Mistakes:

• Confusing Cache-Control with security headers
• Thinking Cache-Control sets content type
• Assuming Cache-Control reveals server info

2. Which of the following is the correct syntax to set a Cache-Control header to cache content for 3600 seconds?

easy

A. "Cache-Control: max-age=3600"

B. "Cache-Control: timeout=3600"

C. "Cache-Control: expires=3600"

D. "Cache-Control: duration=3600"

Solution

1. Step 1: Recall Cache-Control max-age syntax

   The correct way to specify caching time in seconds is using max-age=seconds.

2. Step 2: Check each option's correctness

   Only "Cache-Control: max-age=3600" uses max-age=3600, which is valid. Others use invalid directives.

3. Final Answer:

   "Cache-Control: max-age=3600" -> Option A

4. Quick Check:

   max-age sets cache time [OK]

Hint: Use max-age to set cache time in seconds [OK]

Common Mistakes:

• Using 'timeout' instead of 'max-age'
• Confusing Cache-Control with Expires header syntax
• Using unsupported directives like 'duration'

3. Given this HTTP response header snippet:

Cache-Control: max-age=0, must-revalidate
ETag: "abc123"

What happens when the browser sends a request with header If-None-Match: "abc123"?

medium

A. Server returns 304 Not Modified if content unchanged

B. Server returns full content ignoring ETag

C. Server returns 500 Internal Server Error

D. Server always returns 200 OK with new ETag

Solution

1. Step 1: Understand ETag and If-None-Match interaction

   The ETag header is a unique identifier for the content version. The browser sends If-None-Match with the ETag value to check if content changed.

2. Step 2: Interpret Cache-Control and server response

   With max-age=0 and must-revalidate, the browser asks server to validate content. If ETag matches, server responds with 304 Not Modified, saving bandwidth.

3. Final Answer:

   Server returns 304 Not Modified if content unchanged -> Option A

4. Quick Check:

   ETag + If-None-Match = 304 if unchanged [OK]

Hint: ETag + If-None-Match = 304 Not Modified if same [OK]

Common Mistakes:

• Assuming server always sends full content
• Confusing 304 with error codes
• Ignoring Cache-Control directives

4. A developer sets the response header as Cache-Control: max-age=abc. What is the likely result?

medium

A. The browser caches the response for 'abc' seconds

B. The server returns a syntax error

C. The browser ignores the Cache-Control header and does not cache

D. The browser caches the response indefinitely

Solution

1. Step 1: Analyze max-age value validity

   The max-age directive requires a numeric value in seconds. 'abc' is invalid.

2. Step 2: Understand browser behavior on invalid Cache-Control

   Browsers typically ignore invalid Cache-Control headers and treat the response as non-cacheable.

3. Final Answer:

   The browser ignores the Cache-Control header and does not cache -> Option C

4. Quick Check:

   Invalid max-age causes no caching [OK]

Hint: max-age must be a number, else ignored [OK]

Common Mistakes:

• Thinking server returns error for header syntax
• Assuming browser caches with invalid value
• Confusing max-age with other headers

5. You want to optimize a REST API to reduce bandwidth by sending full data only when it changes. Which combination of headers should you use in the response?

hard

A. Cache-Control: max-age=0 and no ETag

B. Cache-Control: no-cache and ETag with unique value

C. Cache-Control: no-store and no ETag

D. Cache-Control: max-age=3600 and no ETag

Solution

1. Step 1: Identify headers that enable conditional requests

   ETag provides a unique identifier for content versions, allowing clients to ask if content changed.

2. Step 2: Understand Cache-Control no-cache directive

   no-cache forces the browser to validate with the server before using cached data, ensuring fresh content without unnecessary full data transfer.

3. Step 3: Evaluate other options

   Options without ETag cannot validate changes efficiently; no-store disables caching; max-age=0 without ETag disables validation.

4. Final Answer:

   Cache-Control: no-cache and ETag with unique value -> Option B

5. Quick Check:

   no-cache + ETag = bandwidth saving [OK]

Hint: Use no-cache with ETag for efficient validation [OK]

Common Mistakes:

• Omitting ETag disables change detection
• Using no-store disables caching entirely
• Assuming max-age alone reduces bandwidth