Why API routes serve backend logic in NextJS - Performance Evidence

Performance: Why API routes serve backend logic

MEDIUM IMPACT

API routes affect server response time and client load speed by handling backend logic separately from frontend rendering.

Handling backend logic in a Next.js app

NextJS

export async function GET() {
  // API route handles backend logic server-side
  const data = await fetchDataFromDB();
  return new Response(JSON.stringify({ message: data }), { status: 200 });
}

export default async function Page() {
  // Fetch data server-side during rendering
  const res = await fetch('http://localhost:3000/api/data');
  const data = await res.json();
  return <div>{data.message}</div>;
}

Backend logic runs on server, so client receives ready data, reducing render blocking and improving LCP and INP.

📈 Performance GainReduces client blocking by 200-500ms, improves LCP and interaction speed

Handling backend logic in a Next.js app

NextJS

export default function Page() {
  // Fetch data directly inside the component using client-side fetch
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <div>{data ? data.message : 'Loading...'}</div>;
}

Fetching backend data on the client delays rendering and increases time to interactive, causing slower LCP and INP.

📉 Performance CostBlocks rendering until data fetch completes, increasing LCP by 200-500ms depending on network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching	Low	1+ (due to delayed content)	High (delayed paint)	[X] Bad
Server-side API routes	Low	1 (initial render)	Low (fast paint)	[OK] Good

Rendering Pipeline

API routes run backend logic on the server before sending data to the client, reducing client-side rendering delays.

→Server Processing

→Network Transfer

→Client Rendering

⚠️ BottleneckClient Rendering when backend logic is done client-side

Core Web Vital Affected

LCP

API routes affect server response time and client load speed by handling backend logic separately from frontend rendering.

Optimization Tips

1Run backend logic in API routes to reduce client-side blocking.

2Avoid fetching backend data only on the client to improve LCP.

3Use server-side data fetching to deliver ready content faster.

Performance Quiz - 3 Questions

How do API routes in Next.js improve page load performance?

A By bundling backend code with frontend code to reduce requests

B By running all logic on the client to reduce server load

C By running backend logic on the server before sending data to the client

D By delaying data fetching until after page load

DevTools: Performance

How to check: Record a page load and look for long tasks or delays in the Main thread caused by client-side data fetching.

What to look for: Look for delayed Largest Contentful Paint (LCP) and long scripting times indicating client blocking.