HTTP caching headers in Node.js - Step-by-Step Execution

Concept Flow - HTTP caching headers

Client sends HTTP request

↓

Server receives request

↓

Server checks cache headers

↓

Has valid cache?

↓

Send 304 Not Modified

↓

Client uses cached

↓

Display content

This flow shows how HTTP caching headers help the server decide whether to send a full response or a 304 status to use cached content.

Execution Sample

Node.js

const http = require('http');
http.createServer((req, res) => {
  res.setHeader('Cache-Control', 'max-age=10');
  res.end('Hello');
}).listen(3000);

A simple Node.js server sets a Cache-Control header to tell browsers to cache the response for 10 seconds.

Execution Table

Step	Request Header	Server Cache Check	Response Header Set	Response Sent	Client Action
1	No If-None-Match or If-Modified-Since	No cached version on server	Cache-Control: max-age=10	Full response with 'Hello'	Cache response for 10 seconds
2	Within 10 seconds, no revalidation headers	Cache still valid	Cache-Control: max-age=10	No new response sent (uses cache)	Use cached content
3	After 10 seconds, sends If-Modified-Since	Cache expired, checks resource	Cache-Control: max-age=10	Sends full response again	Update cache with new response
4	After 10 seconds, sends If-None-Match with ETag	ETag matches current resource	Cache-Control: max-age=10	Sends 304 Not Modified	Use cached content
5	After 10 seconds, sends If-None-Match with different ETag	ETag does not match	Cache-Control: max-age=10	Sends full response	Update cache with new response

💡 Client stops requesting new data until cache expires or resource changes

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
Cache-Control header	undefined	max-age=10	max-age=10	max-age=10	max-age=10	max-age=10
Client cache status	empty	cached (valid)	cached (valid)	expired	expired	expired
ETag value	undefined	generated	generated	generated	generated	updated or generated

Key Moments - 3 Insights

Why does the server sometimes send a 304 Not Modified instead of the full response?

When the client sends an If-None-Match or If-Modified-Since header and the resource has not changed, the server sends 304 to tell the client to use its cached copy, saving bandwidth. See execution_table rows 4 and 5.

What does the Cache-Control header 'max-age=10' mean?

It tells the client to consider the response fresh for 10 seconds. During this time, the client can use the cached response without asking the server again. See variable_tracker for Cache-Control header values.

What happens when the cache expires and the client sends a request with an outdated ETag?

The server detects the ETag does not match the current resource and sends the full updated response. The client then updates its cache. See execution_table row 5.

Visual Quiz - 3 Questions

Look at the execution_table at Step 4. What response does the server send?

A 304 Not Modified

B Full response with new content

C 500 Internal Server Error

D Empty response

💡 Hint

Check the 'Response Sent' column at Step 4 in the execution_table.

According to variable_tracker, what is the Cache-Control header value after Step 3?

A no-cache

B max-age=5

C max-age=10

D no-store

💡 Hint

Look at the 'Cache-Control header' row under 'After Step 3' in variable_tracker.

At which step does the client update its cache with a new response?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Check the 'Client Action' column in execution_table for when the cache is updated.

Concept Snapshot

HTTP caching headers help browsers store responses to avoid repeated downloads.
Cache-Control sets how long to keep data fresh (e.g., max-age=10 means 10 seconds).
ETag and Last-Modified headers let clients ask if content changed.
Server replies 304 Not Modified if content is unchanged, saving bandwidth.
Clients use cached data until it expires or changes.
This improves speed and reduces server load.

Full Transcript

HTTP caching headers control how browsers and servers share and reuse web data. When a client requests a page, the server can send headers like Cache-Control to tell the browser how long to keep the response. If the browser has a cached copy and it is still fresh, it uses that without asking the server. After the cache expires, the browser sends headers like If-None-Match with an ETag to check if the content changed. If not, the server replies with 304 Not Modified, telling the browser to keep using its cached copy. If the content changed, the server sends the full new response. This process saves time and bandwidth by avoiding unnecessary downloads. The example Node.js server sets Cache-Control to max-age=10, meaning the browser caches the response for 10 seconds before revalidating. This flow helps websites load faster and reduces server work.

Practice

1. What does the Cache-Control: max-age=3600 header instruct the browser to do?

easy

A. Cache the response for 3600 seconds before checking for updates

B. Never cache the response

C. Cache the response indefinitely

D. Only cache the response if the user is offline

Solution

1. Step 1: Understand the max-age directive meaning

   The max-age directive tells the browser how many seconds it can keep the cached response before it must revalidate.

2. Step 2: Interpret max-age=3600

   max-age=3600 means the browser should cache the response for 3600 seconds (1 hour) before checking for a new version.

3. Final Answer:

   Cache the response for 3600 seconds before checking for updates -> Option A

4. Quick Check:

   max-age=3600 = Cache 1 hour [OK]

Hint: max-age sets cache time in seconds [OK]

Common Mistakes:

• Confusing max-age with no-cache
• Thinking max-age means no caching
• Assuming max-age caches forever

2. Which of the following is the correct way to set a no-store cache control header in a Node.js HTTP response?

easy

A. res.header('Cache-Control', 'no-store')

B. res.setHeader('Cache-Control', 'no-store')

C. res.set('Cache-Control', 'no-store')

D. res.cacheControl = 'no-store'

Solution

1. Step 1: Recall Node.js HTTP response header syntax

   In Node.js, the method to set headers is res.setHeader(name, value).

2. Step 2: Match the correct method and header

   res.setHeader('Cache-Control', 'no-store') uses res.setHeader('Cache-Control', 'no-store'), which is the correct syntax to set the no-store directive.

3. Final Answer:

   res.setHeader('Cache-Control', 'no-store') -> Option B

4. Quick Check:

   Use res.setHeader() to set headers [OK]

Hint: Use res.setHeader() to set HTTP headers [OK]

Common Mistakes:

• Using incorrect method names like res.set or res.header
• Assigning header as a property instead of using setHeader
• Confusing Express methods with Node.js core methods

3. Consider this Node.js code snippet setting caching headers:

res.setHeader('Cache-Control', 'no-cache, max-age=0');
res.end('Hello');

What will the browser do with this response?

medium

A. Ignore caching and always fetch fresh data

B. Cache the response for 0 seconds and never revalidate

C. Cache the response indefinitely without revalidation

D. Cache the response for 0 seconds and revalidate before each use

Solution

1. Step 1: Understand the meaning of no-cache and max-age=0

   The no-cache directive means the browser must revalidate with the server before using the cached response. max-age=0 means the cached response is immediately stale.

2. Step 2: Combine the effects

   With no-cache and max-age=0, the browser caches the response but must check with the server before each use, effectively caching for 0 seconds without skipping validation.

3. Final Answer:

   Cache the response for 0 seconds and revalidate before each use -> Option D

4. Quick Check:

   no-cache + max-age=0 = revalidate every time [OK]

Hint: no-cache means revalidate before use [OK]

Common Mistakes:

• Thinking no-cache means no caching at all
• Ignoring max-age=0 effect
• Assuming browser ignores these headers

4. You wrote this Node.js code to prevent caching:

res.end('Data');
res.setHeader('Cache-Control', 'no-cache, no-store');

But the browser still caches the response. What is the likely mistake?

medium

A. The 'no-store' directive is misspelled

B. The response status code is missing

C. Headers are set after sending the response body

D. The Cache-Control header should be lowercase

Solution

1. Step 1: Check header setting timing

   Headers must be set before sending the response body. If headers are set after calling res.end(), they won't be sent.

2. Step 2: Confirm header spelling and case

   Cache-Control is case-insensitive and 'no-store' is spelled correctly, so these are not issues.

3. Step 3: Status code is optional for caching headers

   Missing status code does not cause caching issues here.

4. Final Answer:

   Headers are set after sending the response body -> Option C

5. Quick Check:

   Set headers before res.end() [OK]

Hint: Set headers before sending response body [OK]

Common Mistakes:

• Setting headers after res.end()
• Misspelling cache directives
• Assuming header case matters

5. You want to serve a JSON API response that should never be cached by browsers or proxies. Which combination of HTTP caching headers in Node.js ensures this behavior?

hard

A. res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate')

B. res.setHeader('Cache-Control', 'max-age=3600')

C. res.setHeader('Cache-Control', 'public, max-age=86400')

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

Solution

1. Step 1: Understand no-store and no-cache directives

   no-store prevents any caching anywhere. no-cache forces revalidation. must-revalidate requires caches to obey freshness rules strictly.

2. Step 2: Analyze each option

   res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate') combines all directives to prevent caching fully. res.setHeader('Cache-Control', 'max-age=3600') and C allow caching. res.setHeader('Cache-Control', 'private, max-age=0') allows private caching but with max-age=0, which still permits revalidation.

3. Final Answer:

   res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate') -> Option A

4. Quick Check:

   no-store + no-cache = no caching [OK]

Hint: Use no-store to fully prevent caching [OK]

Common Mistakes:

• Using max-age allowing caching
• Confusing private with no-store
• Omitting must-revalidate for strictness