res.set for response headers in Express - Performance & Optimization

Performance: res.set for response headers

MEDIUM IMPACT

Setting response headers affects how the browser processes and caches the response, impacting load speed and rendering behavior.

Setting HTTP headers for caching and content type

Express

app.get('/data', (req, res) => {
  res.set({
    'Cache-Control': 'public, max-age=3600',
    'Content-Type': 'application/json'
  });
  res.send(JSON.stringify({ message: 'Hello' }));
});

Enables browser caching for 1 hour, reducing repeated requests and speeding up page load.

📈 Performance GainReduces LCP by caching; lowers server load and network usage

Setting HTTP headers for caching and content type

Express

app.get('/data', (req, res) => {
  res.set('Cache-Control', 'no-cache');
  res.set('Content-Type', 'application/json');
  res.send(JSON.stringify({ message: 'Hello' }));
});

Disabling caching with 'no-cache' forces the browser to re-fetch resources every time, increasing load time and server load.

📉 Performance CostIncreases LCP by forcing repeated downloads; adds server processing for every request

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching headers (Cache-Control: no-cache)	N/A	N/A	Higher due to repeated downloads	[X] Bad
Proper caching headers (Cache-Control: public, max-age=3600)	N/A	N/A	Lower due to cached resources	[OK] Good

Rendering Pipeline

Response headers set by res.set influence how the browser handles the incoming response, affecting caching, content parsing, and rendering.

→Network

→Resource Loading

→Rendering

⚠️ BottleneckNetwork latency and repeated resource fetching due to improper caching headers

Core Web Vital Affected

LCP

Setting response headers affects how the browser processes and caches the response, impacting load speed and rendering behavior.

Optimization Tips

1Use res.set to add caching headers to reduce repeated network requests.

2Avoid 'no-cache' for static resources to improve load speed.

3Set Content-Type headers correctly to help browsers parse content efficiently.

Performance Quiz - 3 Questions

What is the main performance benefit of setting Cache-Control headers with max-age in res.set?

A It allows the browser to cache resources and reduce repeated network requests.

B It disables browser caching to always fetch fresh data.

C It increases server CPU usage by adding headers.

D It delays the response to improve rendering.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, click a resource, and check the Response Headers section for Cache-Control values.

What to look for: Look for Cache-Control header with max-age or public directives indicating caching is enabled.

Practice

1. What does res.set do in an Express response?

easy

A. It sets or updates HTTP headers before sending the response.

B. It sends the response body to the client.

C. It closes the server connection immediately.

D. It logs request details to the console.

Solution

1. Step 1: Understand the purpose of res.set

   res.set is used to add or modify HTTP headers in the response before sending it.

2. Step 2: Differentiate from other response methods

   Sending the body is done by res.send, not res.set. Logging or closing connections are unrelated.

3. Final Answer:

   It sets or updates HTTP headers before sending the response. -> Option A

4. Quick Check:

   res.set sets headers [OK]

Hint: Remember: res.set changes headers, not body or connection [OK]

Common Mistakes:

• Confusing res.set with res.send
• Thinking res.set sends the response
• Assuming res.set closes the connection

2. Which of the following is the correct syntax to set a single header using res.set?

easy

A. res.set('Content-Type', application/json);

B. res.set('Content-Type', 'application/json');

C. res.set({Content-Type: 'application/json'});

D. res.set('Content-Type' => 'application/json');

Solution

1. Step 1: Recall correct method signature

   The correct syntax for setting one header is res.set(name, value) where both are strings.

2. Step 2: Check each option

   res.set('Content-Type', 'application/json'); uses correct syntax with two string arguments. res.set('Content-Type' => 'application/json'); uses invalid arrow syntax. res.set({Content-Type: 'application/json'}); uses invalid object syntax - unquoted key Content-Type (hyphen requires quotes). res.set('Content-Type', application/json); misses quotes around value.

3. Final Answer:

   res.set('Content-Type', 'application/json'); -> Option B

4. Quick Check:

   Two string args for single header [OK]

Hint: Use two strings for single header: name and value [OK]

Common Mistakes:

• Using arrow => instead of comma
• Passing unquoted values
• Confusing object syntax for single header

3. What will be the value of the Content-Type header after this code runs?

res.set({
  'Content-Type': 'text/html',
  'Cache-Control': 'no-cache'
});
res.set('Content-Type', 'application/json');

medium

A. Undefined (header not set)

B. 'text/html'

C. 'no-cache'

D. 'application/json'

Solution

1. Step 1: Understand header setting order

   First, Content-Type is set to 'text/html' via object. Then it is overwritten by res.set('Content-Type', 'application/json').

2. Step 2: Determine final header value

   The last set value for Content-Type is 'application/json', so that is the final header value.

3. Final Answer:

   'application/json' -> Option D

4. Quick Check:

   Last header set wins [OK]

Hint: Later res.set calls overwrite previous headers [OK]

Common Mistakes:

• Assuming first set value stays
• Confusing other headers with Content-Type
• Thinking headers merge values

4. Identify the error in this Express code snippet:

app.get('/data', (req, res) => {
  res.send('Hello');
  res.set('X-Custom-Header', '123');
});

medium

A. Headers must be set before sending the response body.

B. res.set cannot set custom headers.

C. res.send should be called twice to set headers.

D. No error; code works fine.

Solution

1. Step 1: Check order of res.set and res.send

   Headers must be set before calling res.send because sending the body finalizes the response.

2. Step 2: Identify the mistake

   Here, res.send is called first, then res.set, which is too late to add headers.

3. Final Answer:

   Headers must be set before sending the response body. -> Option A

4. Quick Check:

   Set headers before send [OK]

Hint: Always set headers before sending response body [OK]

Common Mistakes:

• Setting headers after res.send
• Thinking res.set can't set custom headers
• Calling res.send multiple times

5. You want to set multiple headers including Content-Type and Cache-Control in one call, but only if a condition is true. Which code correctly uses res.set with condition?

hard

A. res.set({'Content-Type': isJson ? 'application/json' : 'text/html'}); res.set('Cache-Control', 'no-store');

B. res.set('Content-Type', isJson ? 'application/json' : 'text/html', 'Cache-Control', 'no-store');

C. if (isJson) res.set({'Content-Type': 'application/json', 'Cache-Control': 'no-store'});

D. res.set('Content-Type', 'application/json' && 'Cache-Control', 'no-store');

Solution

1. Step 1: Understand how to set multiple headers conditionally

   Using an object with res.set allows setting many headers at once. Wrapping in an if statement applies condition.

2. Step 2: Evaluate each option

   if (isJson) res.set({'Content-Type': 'application/json', 'Cache-Control': 'no-store'}); correctly uses an if condition and sets multiple headers in one object. res.set('Content-Type', isJson ? 'application/json' : 'text/html', 'Cache-Control', 'no-store'); has invalid syntax with multiple pairs in one call. res.set({'Content-Type': isJson ? 'application/json' : 'text/html'}); res.set('Cache-Control', 'no-store'); splits headers into two calls but is valid; however, question asks for one call. res.set('Content-Type', 'application/json' && 'Cache-Control', 'no-store'); uses invalid logical operator in arguments.

3. Final Answer:

   if (isJson) res.set({'Content-Type': 'application/json', 'Cache-Control': 'no-store'}); -> Option C

4. Quick Check:

   if + res.set(object) for conditional multiple [OK]

Hint: Use object syntax inside if to set multiple headers [OK]

Common Mistakes:

• Passing multiple header pairs as separate arguments
• Using logical operators inside res.set arguments
• Setting headers outside condition