Response modification in NextJS - Performance & Optimization

Performance: Response modification

MEDIUM IMPACT

Modifying HTTP responses affects page load speed by potentially delaying the first byte and can impact caching efficiency.

Adding custom headers to server responses in Next.js API routes

NextJS

export async function GET(request) {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  // Use Response constructor with headers directly
  return new Response(JSON.stringify(json), {
    headers: { 'X-Custom-Header': 'value' }
  });
}

Directly setting headers in the Response constructor avoids extra synchronous steps and allows streaming.

📈 Performance GainReduces blocking time by 30-50ms, improving LCP

Adding custom headers to server responses in Next.js API routes

NextJS

export async function GET(request) {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  // Synchronous blocking header modification
  const headers = new Headers();
  headers.append('X-Custom-Header', 'value');
  return new Response(JSON.stringify(json), { headers });
}

Creating and modifying headers synchronously after fetching data blocks response streaming and delays first byte.

📉 Performance CostBlocks rendering for 50-100ms depending on data fetch and header processing

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous body modification in middleware	N/A	N/A	Blocks streaming, delays paint	[X] Bad
Header-only modification in middleware	N/A	N/A	No blocking, fast paint	[OK] Good
Synchronous header creation after fetch	N/A	N/A	Blocks first byte, delays LCP	[X] Bad
Direct header setting in Response constructor	N/A	N/A	Fast first byte, improves LCP	[OK] Good

Rendering Pipeline

Response modification affects the network and browser rendering pipeline by potentially delaying the first byte and impacting streaming. Headers are processed early, while body modifications can block streaming and increase layout delays.

→Network

→First Byte

→Streaming

→Layout

⚠️ BottleneckResponse body modification causing buffering blocks streaming and delays LCP.

Core Web Vital Affected

LCP

Modifying HTTP responses affects page load speed by potentially delaying the first byte and can impact caching efficiency.

Optimization Tips

1Avoid synchronous response body modifications to keep streaming fast.

2Modify only headers in middleware to prevent blocking.

3Use Response constructor headers option directly for best performance.

Performance Quiz - 3 Questions

Which response modification approach in Next.js middleware best improves Largest Contentful Paint (LCP)?

A Modify only response headers without changing body

B Buffer and modify the entire response body synchronously

C Add multiple synchronous headers after fetching data

D Modify response body in middleware using blocking calls

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, select main document or API request, check Timing waterfall for 'Waiting (TTFB)' and 'Content Download' times.

What to look for: Long 'Waiting' times indicate blocking response modifications; shorter times mean faster first byte and streaming.

Practice

1. In Next.js, what does modifying the response headers allow you to do?

easy

A. Change the React component state on the client

B. Control caching and security policies sent to the browser

C. Modify the URL path of the current page

D. Update the database directly from the response

Solution

1. Step 1: Understand response headers role

   Response headers tell the browser how to handle the data, like caching or security rules.

2. Step 2: Identify what modifying headers affects

   Changing headers controls browser behavior, not client state or URLs.

3. Final Answer:

   Control caching and security policies sent to the browser -> Option B

4. Quick Check:

   Headers control browser policies = A [OK]

Hint: Headers control browser rules like caching and security [OK]

Common Mistakes:

• Thinking headers change client-side state
• Confusing headers with URL routing
• Assuming headers update databases

2. Which of the following is the correct way to set a custom header in a Next.js API route response?

easy

A. res.setHeader('X-Custom-Header', 'value')

B. res.headers['X-Custom-Header'] = 'value'

C. res.header('X-Custom-Header', 'value')

D. res.addHeader('X-Custom-Header', 'value')

Solution

1. Step 1: Recall Next.js API response methods

   Next.js uses Node.js response objects where setHeader is the standard method.

2. Step 2: Compare options to Node.js response API

   Only setHeader is a valid method; others are incorrect or undefined.

3. Final Answer:

   res.setHeader('X-Custom-Header', 'value') -> Option A

4. Quick Check:

   Use setHeader to set headers = D [OK]

Hint: Use res.setHeader() to set headers in Next.js API [OK]

Common Mistakes:

• Using res.headers as an object directly
• Calling non-existent methods like header() or addHeader()
• Confusing client-side and server-side APIs

3. What will be the HTTP status code of this Next.js API response?

export default function handler(req, res) {
  res.status(404).json({ error: 'Not found' });
}

medium

A. 500

B. 200

C. 404

D. 302

Solution

1. Step 1: Identify the status method usage

   The code calls res.status(404) to set the HTTP status code to 404.

2. Step 2: Understand the effect of res.status()

   This sets the response status code before sending JSON data.

3. Final Answer:

   404 -> Option C

4. Quick Check:

   res.status(404) sets status code 404 [OK]

Hint: res.status(code) sets HTTP status code [OK]

Common Mistakes:

• Assuming default 200 status without checking code
• Confusing 404 with 500 or redirect codes
• Ignoring the status() method effect

4. Identify the error in this Next.js API route code that tries to modify the response:

export default function handler(req, res) {
  res.status(200);
  res.json({ message: 'Hello' });
  res.setHeader('X-Test', 'value');
}

medium

A. res.json() cannot be used with status()

B. res.status(200) is missing a return statement

C. res.setHeader() should be called after res.json()

D. Headers must be set before sending the response body

Solution

1. Step 1: Review response order rules

   Headers must be set before sending the response body with res.json().

2. Step 2: Identify incorrect header setting

   res.setHeader() is called after res.json(), which is too late to modify headers.

3. Final Answer:

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

4. Quick Check:

   Set headers before body = C [OK]

Hint: Set headers before sending response body [OK]

Common Mistakes:

• Setting headers after res.json()
• Thinking res.status() sends response immediately
• Ignoring response flow order

5. You want to add caching headers to a Next.js API response only if the user is authenticated. Which code snippet correctly modifies the response based on this condition?

export default function handler(req, res) {
  const isAuth = req.headers.authorization === 'secret-token';
  // Add caching headers only if authenticated
  ???
  res.status(200).json({ data: 'Secure data' });
}

hard

A. if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); }

B. if (!isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); }

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

D. res.status(401).json({ error: 'Unauthorized' });

Solution

1. Step 1: Understand the condition for caching

   Caching headers should be added only if the user is authenticated (isAuth is true).

2. Step 2: Choose the correct conditional header setting

   if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); } sets caching headers only when isAuth is true, matching the requirement.

3. Final Answer:

   if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); } -> Option A

4. Quick Check:

   Set cache header only if authenticated = B [OK]

Hint: Use if (isAuth) to conditionally set headers [OK]

Common Mistakes:

• Setting cache headers when not authenticated
• Using public cache instead of private
• Returning 401 without setting headers when required