Route handlers (route.ts) in NextJS - Performance & Optimization

Performance: Route handlers (route.ts)

MEDIUM IMPACT

This affects server response time and initial page load speed by controlling how requests are handled and data is fetched.

Handling API requests in Next.js route.ts files

NextJS

export async function GET(request) {
  const data = await fetch('https://external-api.com/data', { next: { cache: 'force-cache' } });
  const json = await data.json();
  return new Response(JSON.stringify(json));
}

Caching the fetch result avoids repeated external calls, speeding up response and reducing server load.

📈 Performance GainReduces server response time by up to 90% on repeated requests

Handling API requests in Next.js route.ts files

NextJS

export async function GET(request) {
  const data = await fetch('https://external-api.com/data');
  const json = await data.json();
  return new Response(JSON.stringify(json));
}

Fetching data from an external API on every request without caching causes slow responses and delays page rendering.

📉 Performance CostBlocks server response for 200-500ms per request depending on external API speed

Performance Comparison

Pattern	Server Processing	Network Delay	Response Time	Verdict
No caching, external API fetch on every request	High CPU and wait time	High due to external call	Slow (200-500ms+)	[X] Bad
Cached data fetch in route handler	Low CPU, fast retrieval	Low network delay	Fast (<50ms on repeated calls)	[OK] Good

Rendering Pipeline

Route handlers process incoming requests, fetch or compute data, then send responses. Slow handlers delay server response, increasing time before browser can start rendering.

→Server Processing

→Network Transfer

→Browser Rendering Start

⚠️ BottleneckServer Processing when data fetching or computation is slow

Core Web Vital Affected

LCP

This affects server response time and initial page load speed by controlling how requests are handled and data is fetched.

Optimization Tips

1Cache data in route handlers to reduce repeated slow fetches.

2Avoid blocking synchronous code in route handlers to speed up server response.

3Use DevTools Network panel to monitor server response times and optimize accordingly.

Performance Quiz - 3 Questions

What is the main performance impact of slow route handlers in Next.js?

A They cause layout shifts on the page

B They delay server response, increasing Largest Contentful Paint (LCP)

C They increase JavaScript bundle size

D They reduce keyboard navigation speed

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect the API request timing and response size.

What to look for: Look for long waiting (TTFB) times indicating slow server response from route handlers.