HTTP caching headers (ETag, Cache-Control) in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the effect of setting Cache-Control: no-store in Express?

Consider an Express server that sets the header Cache-Control: no-store on responses. What will happen when a browser receives this header?

Express

app.get('/data', (req, res) => {
  res.set('Cache-Control', 'no-store');
  res.send('Fresh data');
});

A The browser will never cache the response and will always request fresh data.

B The browser will cache the response but revalidate it before each use.

C The browser will cache the response and use it without revalidation until it expires.

D The browser will cache the response only if the ETag matches.

💡 Hint

Think about what no-store means for caching.

Cache-Control: no-store tells browsers not to store any part of the response. This means the browser will always fetch fresh data and never use a cached copy.

📝 Syntax

intermediate

Which Express code correctly sets an ETag header?

Which code snippet correctly sets a strong ETag header with value "12345" on the response?

A res.header('etag', 'W/12345');

B res.set('ETag', '"12345"');

C res.set('ETag', 'W/"12345"');

D res.setHeader('etag', '12345');

💡 Hint

Strong ETags do not start with W/.

A strong ETag is a quoted string without the W/ prefix. Option B sets ETag to "12345" correctly. Option B sets a weak ETag. Option B uses lowercase header name which Express normalizes but lacks quotes. Option B is missing quotes and uses lowercase header name.

❓ state_output

advanced

What is the response status when If-None-Match matches ETag?

An Express server sends ETag: "abc123". The client sends a request with header If-None-Match: "abc123". What status code will the server respond with if it uses res.status(304).end() on match?

Express

app.get('/resource', (req, res) => {
  const etag = '"abc123"';
  res.set('ETag', etag);
  if (req.headers['if-none-match'] === etag) {
    res.status(304).end();
  } else {
    res.send('Resource content');
  }
});

A 200 OK with resource content

B 500 Internal Server Error

C 404 Not Found

D 304 Not Modified with no body

💡 Hint

What does status 304 mean in HTTP?

Status 304 means the resource has not changed. The server tells the client to use its cached copy without sending the body again.

🔧 Debug

advanced

Why does this Express code not cache responses as expected?

Given this Express code, why might the browser still cache responses despite setting Cache-Control: no-cache?

Express

app.get('/info', (req, res) => {
  res.set('Cache-Control', 'no-cache');
  res.send('Info data');
});

A Because <code>no-cache</code> means the browser must revalidate but can cache the response.

B Because <code>no-cache</code> disables caching completely.

C Because the server forgot to set <code>ETag</code> header.

D Because <code>Cache-Control</code> header is ignored by browsers.

💡 Hint

Check the meaning of no-cache in HTTP caching.

Cache-Control: no-cache means the browser can store the response but must check with the server before using it. It does not prevent caching entirely.

🧠 Conceptual

expert

How does Express handle ETag generation by default?

Which statement best describes how Express generates ETags for responses by default?

A Express automatically generates strong ETags based on response body content using a hash function.

B Express disables ETag generation by default; developers must set them manually.

C Express generates weak ETags by default using a hash of the response body.

D Express generates weak ETags by default using response content length and modification time.

💡 Hint

Check Express documentation on default ETag behavior.

Express generates weak ETags by default. It uses a hash of the response body to create a weak ETag, which starts with W/. This helps with caching but allows some flexibility in content changes.

Practice

1. What is the main purpose of the ETag header in Express HTTP responses?

easy

A. To redirect the client to a different URL

B. To specify how long the browser should cache the resource

C. To identify a specific version of a resource for caching validation

D. To indicate the content type of the response

Solution

1. Step 1: Understand the role of ETag

   The ETag header provides a unique identifier for a specific version of a resource, allowing the server to tell if the resource has changed.

2. Step 2: Compare with other headers

   Cache-Control sets caching duration, redirects use Location header, and content type is set by Content-Type header, so these are not related to ETag.

3. Final Answer:

   To identify a specific version of a resource for caching validation -> Option C

4. Quick Check:

   ETag = version ID for caching [OK]

Hint: ETag tags resource versions to avoid unnecessary downloads [OK]

Common Mistakes:

• Confusing ETag with Cache-Control duration
• Thinking ETag redirects clients
• Mixing ETag with content type headers

2. Which of the following is the correct way to set a Cache-Control header in Express to cache a response for 1 hour?

easy

A. res.set('Cache-Control', 'max-age=3600')

B. res.header('Cache-Control', 'no-cache')

C. res.cache('max-age=3600')

D. res.setHeader('Cache-Control', 'max-age=60')

Solution

1. Step 1: Identify Express method to set headers

   Express uses res.set() or res.header() to set headers. Both work, but res.set() is common and correct here.

2. Step 2: Check Cache-Control value for 1 hour

   1 hour = 3600 seconds, so max-age=3600 is correct. res.header('Cache-Control', 'no-cache') uses 'no-cache' which disables caching. res.cache('max-age=3600') is invalid method. res.setHeader('Cache-Control', 'max-age=60') sets max-age to 60 seconds, not 1 hour.

3. Final Answer:

   res.set('Cache-Control', 'max-age=3600') -> Option A

4. Quick Check:

   Cache-Control max-age=3600 sets 1 hour caching [OK]

Hint: Use res.set with 'max-age=seconds' for caching time [OK]

Common Mistakes:

• Using wrong method like res.cache
• Confusing seconds with minutes in max-age
• Setting no-cache when caching is needed

3. Given this Express code snippet, what will the client receive if the request includes header If-None-Match matching the ETag?

app.get('/data', (req, res) => {
  const data = { message: 'Hello' };
  const etag = '12345';
  res.set('ETag', etag);
  if (req.headers['if-none-match'] === etag) {
    res.status(304).end();
  } else {
    res.json(data);
  }
});

medium

A. A 500 Internal Server Error

B. A 304 Not Modified status with no body

C. A 404 Not Found error

D. A JSON response with { message: 'Hello' }

Solution

1. Step 1: Check If-None-Match header against ETag

   If the request's If-None-Match header equals the ETag '12345', the server responds with status 304 and no body.

2. Step 2: Understand 304 response meaning

   304 means Not Modified, telling the client to use cached data without sending the body again.

3. Final Answer:

   A 304 Not Modified status with no body -> Option B

4. Quick Check:

   If-None-Match matches ETag = 304 response [OK]

Hint: If ETag matches If-None-Match, send 304 no body [OK]

Common Mistakes:

• Sending JSON body with 304 status
• Confusing 304 with 404 or 500 errors
• Ignoring If-None-Match header

4. Identify the bug in this Express code that tries to set Cache-Control and ETag headers:

app.get('/resource', (req, res) => {
  const content = 'data';
  res.setHeader('Cache-Control', 'max-age=600');
  res.set('ETag', 'abc123');
  res.send(content);
});

medium

A. Using both res.setHeader and res.set causes header conflicts

B. ETag header value must be a number, not a string

C. Cache-Control max-age should be in milliseconds, not seconds

D. No bug; code sets headers correctly

Solution

1. Step 1: Check header setting methods

   In Express, res.setHeader and res.set both set headers correctly; using both is allowed and does not conflict.

2. Step 2: Validate header values

   ETag can be any string value. Cache-Control max-age is in seconds, so '600' is valid for 10 minutes.

3. Final Answer:

   No bug; code sets headers correctly -> Option D

4. Quick Check:

   res.setHeader and res.set both valid; ETag string OK [OK]

Hint: res.set and res.setHeader both valid for headers [OK]

Common Mistakes:

• Thinking ETag must be numeric
• Confusing max-age units (seconds vs milliseconds)
• Assuming res.setHeader and res.set conflict

5. You want to implement HTTP caching in Express so that clients cache a JSON response for 5 minutes, but also use ETag to validate changes. Which code snippet correctly combines Cache-Control and ETag headers to achieve this?

hard

A. res.set({ 'Cache-Control': 'max-age=300', ETag: 'xyz789' }); res.json(data);

B. res.set('Cache-Control', 'no-store'); res.set('ETag', 'xyz789'); res.json(data);

C. res.set('Cache-Control', 'max-age=300'); res.removeHeader('ETag'); res.json(data);

D. res.set('Cache-Control', 'max-age=300, no-cache'); res.set('ETag', 'xyz789'); res.json(data);

Solution

1. Step 1: Set Cache-Control for 5 minutes

   5 minutes = 300 seconds, so max-age=300 is correct to allow caching for that duration.

2. Step 2: Include ETag header for validation

   Setting ETag allows clients to check if the cached version is still valid before using it.

3. Step 3: Analyze other options

   res.set('Cache-Control', 'no-store'); res.set('ETag', 'xyz789'); res.json(data); disables caching with 'no-store'. res.set('Cache-Control', 'max-age=300'); res.removeHeader('ETag'); res.json(data); removes ETag, losing validation. res.set('Cache-Control', 'max-age=300, no-cache'); res.set('ETag', 'xyz789'); res.json(data); uses conflicting directives 'max-age=300, no-cache' which disables caching despite max-age.

4. Final Answer:

   res.set({ 'Cache-Control': 'max-age=300', ETag: 'xyz789' }); res.json(data); -> Option A

5. Quick Check:

   Cache-Control max-age + ETag = proper caching [OK]

Hint: Combine max-age with ETag for caching plus validation [OK]

Common Mistakes:

• Using no-store disables caching
• Removing ETag loses validation benefits
• Combining max-age with no-cache cancels caching