HTTP caching headers in Node.js - Mini Project: Build & Apply

HTTP Caching Headers with Node.js

📖 Scenario: You are building a simple Node.js server that serves a static message. To improve performance and reduce unnecessary network traffic, you want to add HTTP caching headers.This will help browsers know when they can reuse the cached response instead of asking the server again.

🎯 Goal: Create a Node.js server that sends a plain text response with proper HTTP caching headers set.

📋 What You'll Learn

Create a Node.js HTTP server using the built-in http module

Set the Cache-Control header to cache the response for 60 seconds

Set the Expires header to a date 60 seconds in the future

Send a plain text response with the message Hello, caching!

💡 Why This Matters

🌍 Real World

Web servers use caching headers to improve speed and reduce bandwidth by telling browsers when to reuse stored responses.

💼 Career

Understanding HTTP caching headers is essential for backend developers and anyone working with web performance optimization.

1

Create a basic Node.js HTTP server

Write code to create a Node.js HTTP server using the http module. The server should listen on port 3000 and respond with the text Hello, caching! without any headers.

Node.js

const http = require('http');

// Your code here

Hint

Use http.createServer to create the server and res.end to send the response.

2

Add a cache duration variable

Add a variable called cacheDuration and set it to 60 to represent 60 seconds of caching time.

Node.js

const http = require('http');

// Your code here

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, caching!');
});

server.listen(3000);

Hint

Declare cacheDuration as a constant with the value 60.

3

Set the Cache-Control header

Inside the server callback, add a Cache-Control header to the response. Set it to public, max-age=60 using the cacheDuration variable.

Node.js

const http = require('http');

const cacheDuration = 60;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    // Your code here
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, caching!');
});

server.listen(3000);

Hint

Use res.setHeader with the exact string 'Cache-Control' and template literal for max-age.

4

Set the Expires header

Inside the server callback, add an Expires header. Calculate the expiration date by creating a new Date object, adding cacheDuration seconds, and converting it to UTC string format.

Node.js

const http = require('http');

const cacheDuration = 60;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Cache-Control', `public, max-age=${cacheDuration}`);
    res.setHeader('Content-Type', 'text/plain');
    // Add Expires header here
    res.end('Hello, caching!');
});

server.listen(3000);

Hint

Create a variable expires with the future date and set it as the Expires header.

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