Response headers (Cache-Control, ETag) in Rest API - Mini Project: Build & Apply

Response headers (Cache-Control, ETag)

📖 Scenario: You are building a simple REST API that returns product information. To improve performance and reduce unnecessary data transfer, you want to add HTTP response headers Cache-Control and ETag.The Cache-Control header tells browsers how long they can keep the response before asking again. The ETag header helps browsers check if the data has changed since last time.

🎯 Goal: Create a REST API endpoint that returns product data with Cache-Control and ETag headers set correctly.

📋 What You'll Learn

Create a dictionary called product with keys id, name, and price with values 101, "Coffee Mug", and 12.99 respectively.

Create a variable called cache_duration and set it to 3600 (seconds).

Create a function called generate_etag that takes the product dictionary and returns a string ETag by hashing the string representation of the product.

Print the response headers Cache-Control with value max-age=3600 and ETag with the generated ETag.

💡 Why This Matters

🌍 Real World

Response headers like <code>Cache-Control</code> and <code>ETag</code> help browsers and servers communicate efficiently. They reduce bandwidth and speed up loading times by avoiding sending unchanged data.

💼 Career

Understanding and setting HTTP headers is important for backend developers, API developers, and web engineers to optimize web performance and caching strategies.

1

DATA SETUP: Create the product dictionary

Create a dictionary called product with these exact entries: 'id': 101, 'name': "Coffee Mug", and 'price': 12.99.

Rest API

# Create the product dictionary with id, name, and price
# Your code here

Hint

Use curly braces {} to create a dictionary with the exact keys and values.

2

CONFIGURATION: Set cache duration

Create a variable called cache_duration and set it to 3600 (seconds).

Rest API

product = {'id': 101, 'name': "Coffee Mug", 'price': 12.99}
# Set cache_duration to 3600 seconds
# Your code here

Hint

Just assign the number 3600 to the variable cache_duration.

3

CORE LOGIC: Create the ETag generator function

Create a function called generate_etag that takes the product dictionary as input and returns a string ETag by hashing the string representation of product using the hashlib.md5 function.

Rest API

product = {'id': 101, 'name': "Coffee Mug", 'price': 12.99}
cache_duration = 3600
import hashlib

# Create generate_etag function
# Your code here

Hint

Use str(product) to convert the dictionary to a string, then encode it and hash with hashlib.md5. Return the hex digest.

4

OUTPUT: Print the response headers

Print the response headers Cache-Control with value max-age=3600 and ETag with the generated ETag from generate_etag(product). Use the exact print statements: print(f"Cache-Control: max-age={cache_duration}") and print(f"ETag: {etag}").

Rest API

product = {'id': 101, 'name': "Coffee Mug", 'price': 12.99}
cache_duration = 3600
import hashlib

def generate_etag(product):
    product_str = str(product)
    etag = hashlib.md5(product_str.encode()).hexdigest()
    return etag

# Print Cache-Control and ETag headers
# Your code here

Hint

Call generate_etag(product) and store it in etag. Then print the headers exactly as shown.

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