Conditional requests handling in Express - Mini Project: Build & Apply

Conditional Requests Handling in Express

📖 Scenario: You are building a simple Express server that serves a static message. To optimize bandwidth and improve performance, you want to handle conditional requests using the If-None-Match header with ETags.This means the server will respond with 304 Not Modified if the client's cached version is still valid, avoiding sending the full response again.

🎯 Goal: Create an Express server that serves a message at /message with an ETag header. The server should check the If-None-Match header from the client and respond with 304 Not Modified if the ETag matches, or send the message with the ETag if it does not.

📋 What You'll Learn

Create an Express app with a route /message

Define a constant ETag string etagValue with value "12345"

Check the If-None-Match header from the request

Respond with 304 status if the ETag matches

Otherwise, respond with status 200, the message body, and set the ETag header

💡 Why This Matters

🌍 Real World

Conditional requests handling is used in web servers to reduce data transfer by letting clients cache resources and only download updates when needed.

💼 Career

Understanding how to implement ETag and conditional requests is important for backend developers to optimize API performance and improve user experience.

1

Setup Express app and route

Create an Express app by requiring express and calling express(). Then create a GET route handler for /message that sends the text 'Hello, world!' with status 200.

Express

const express = require('express');
const app = express();

// Create GET route for /message
// Your code here

Hint

Use require('express') to import Express. Then call express() to create the app. Use app.get('/message', (req, res) => { ... }) to define the route.

2

Add ETag constant

Add a constant variable called etagValue and set it to the string "12345" above the route handler.

Express

const express = require('express');
const app = express();

// Define etagValue constant
// Your code here

app.get('/message', (req, res) => {
  res.status(200).send('Hello, world!');
});

Hint

Use const etagValue = "12345"; to define the ETag string.

3

Check If-None-Match header and respond conditionally

Inside the /message route handler, get the If-None-Match header from req.headers. If it equals etagValue, respond with status 304 and end the response. Otherwise, continue to send the message with status 200 and set the ETag header to etagValue.

Express

const express = require('express');
const app = express();

const etagValue = "12345";

app.get('/message', (req, res) => {
  // Check If-None-Match header and respond accordingly
  // Your code here
});

Hint

Use req.headers['if-none-match'] to get the header. Compare it to etagValue. If equal, send 304 with res.status(304).end(). Otherwise, set the ETag header and send the message.

4

Start the server on port 3000

Add code to start the Express server listening on port 3000 using app.listen. Log the message 'Server running on port 3000' when the server starts.

Express

const express = require('express');
const app = express();

const etagValue = "12345";

app.get('/message', (req, res) => {
  const ifNoneMatch = req.headers['if-none-match'];
  if (ifNoneMatch === etagValue) {
    res.status(304).end();
  } else {
    res.set('ETag', etagValue);
    res.status(200).send('Hello, world!');
  }
});

// Start server on port 3000
// Your code here

Hint

Use app.listen(3000, () => { console.log('Server running on port 3000'); }) to start the server.

Practice

1. What is the main purpose of handling conditional requests in Express?

easy

A. To increase server processing time

B. To always send full response data regardless of cache

C. To reduce data sent by checking if the client cache is fresh

D. To disable client caching completely

Solution

1. Step 1: Understand conditional requests concept

   Conditional requests check if the client already has fresh data to avoid sending it again.

2. Step 2: Identify the purpose in Express

   Express uses conditional requests to reduce unnecessary data transfer by responding with 304 if data is fresh.

3. Final Answer:

   To reduce data sent by checking if the client cache is fresh -> Option C

4. Quick Check:

   Conditional requests reduce data transfer = B [OK]

Hint: Conditional requests save bandwidth by checking cache freshness [OK]

Common Mistakes:

• Thinking conditional requests increase server load
• Assuming full data is always sent
• Believing caching is disabled by conditional requests

2. Which Express property is used to check if the request is fresh based on ETag or Last-Modified headers?

easy

A. res.isFresh()

B. res.checkFresh()

C. req.isFresh()

D. req.fresh

Solution

1. Step 1: Recall Express request object properties

   The freshness of a request is checked on the request object, not the response.

2. Step 2: Identify the correct property name

   Express provides req.fresh to check if the request is fresh based on headers.

3. Final Answer:

   req.fresh -> Option D

4. Quick Check:

   Check freshness with req.fresh = B [OK]

Hint: Use req.fresh to check cache freshness in Express [OK]

Common Mistakes:

• Using res.isFresh() instead of req.fresh
• Confusing property names like req.isFresh() which don't exist
• Trying to check freshness on response object

3. What will the following Express code send if the client sends a matching ETag header?

app.get('/data', (req, res) => {
  res.set('ETag', '12345');
  if (req.fresh) {
    res.status(304).end();
  } else {
    res.send('Full data response');
  }
});

medium

A. Full data response with status 200

B. Status 304 with no body

C. Status 500 error

D. Empty response with status 200

Solution

1. Step 1: Understand ETag and req.fresh

   The server sets ETag '12345'. If the client sends the same ETag, req.fresh returns true.

2. Step 2: Analyze the conditional response

   If req.fresh is true, the server responds with status 304 and ends response without body.

3. Final Answer:

   Status 304 with no body -> Option B

4. Quick Check:

   Matching ETag triggers 304 no body = A [OK]

Hint: Matching ETag means send 304 status with empty body [OK]

Common Mistakes:

• Sending full data even when ETag matches
• Returning status 200 with empty body
• Confusing 304 with error status

4. Identify the error in this Express route handling conditional requests:

app.get('/info', (req, res) => {
  res.set('Last-Modified', new Date().toUTCString());
  if (req.fresh()) {
    res.status(304).end();
  } else {
    res.send('Info data');
  }
});

medium

A. Calling req.fresh() with parentheses (it's a property)

B. Setting Last-Modified header incorrectly

C. Missing res.send() in both branches

D. Using arrow function incorrectly

Solution

1. Step 1: Check usage of req.fresh

   req.fresh is a property and must be accessed without parentheses: req.fresh

2. Step 2: Verify other parts

   Last-Modified header is set correctly, res.send() is called in else branch, arrow function syntax is correct.

3. Final Answer:

   Calling req.fresh() with parentheses (it's a property) -> Option A

4. Quick Check:

   Property access needs no () = A [OK]

Hint: Always access req.fresh without parentheses [OK]

Common Mistakes:

• Treating req.fresh as a method by adding parentheses
• Misformatting Last-Modified header
• Not sending response in all branches

5. You want to optimize an Express API to support conditional requests using both ETag and Last-Modified headers. Which approach correctly implements this to respond with 304 when appropriate? A) Set ETag and Last-Modified headers, then check req.fresh to send 304 or full data. B) Only set ETag header and always send full data. C) Set Last-Modified header but never check req.fresh, always send 200. D) Use req.fresh without setting any headers.

hard

A. Set ETag and Last-Modified headers, then check req.fresh to send 304 or full data

B. Only set ETag header and always send full data

C. Set Last-Modified header but never check req.fresh, always send 200

D. Use req.fresh without setting any headers

Solution

1. Step 1: Understand headers and freshness check

   ETag and Last-Modified headers must be set for conditional requests to work properly.

2. Step 2: Use req.fresh to decide response

   req.fresh checks these headers and client cache; if fresh, respond 304, else send full data.

3. Step 3: Evaluate options

   Only Set ETag and Last-Modified headers, then check req.fresh to send 304 or full data: Set ETag and Last-Modified headers, then check req.fresh to send 304 or full data correctly sets headers and uses req.fresh to conditionally send 304 or data.

4. Final Answer:

   Set ETag and Last-Modified headers, then check req.fresh to send 304 or full data -> Option A

5. Quick Check:

   Set headers + check req.fresh = D [OK]

Hint: Set headers and check req.fresh to send 304 or data [OK]

Common Mistakes:

• Not setting headers but checking freshness
• Setting headers but ignoring req.fresh
• Using req.fresh without headers