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.