Dynamic route segments in NextJS - Performance & Optimization

Performance: Dynamic route segments

MEDIUM IMPACT

This affects the page load speed and server response time by determining how routes are matched and pages are rendered dynamically.

Creating dynamic routes for user profiles

NextJS

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();
  const paths = users.map(user => ({ params: { id: user.id.toString() } }));
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();
  return { props: { user }, revalidate: 60 };
}

export default function UserPage({ user }) {
  return <div>{user.name}</div>;
}

Pre-generates pages at build or on-demand, reducing server load and speeding up page load for users.

📈 Performance GainReduces server blocking to near 0ms on repeat visits, improves LCP significantly

Creating dynamic routes for user profiles

NextJS

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/users/${id}`);
  const user = await res.json();
  return { props: { user } };
}

export default function UserPage({ user }) {
  return <div>{user.name}</div>;
}

Fetching data on every request blocks rendering and increases server load, causing slower LCP.

📉 Performance CostBlocks rendering for 200-500ms per request, increases server CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side rendering on every request	Minimal DOM nodes	1 reflow per page load	High paint cost due to blocking	[X] Bad
Static generation with fallback blocking	Minimal DOM nodes	1 reflow per page load	Low paint cost, fast rendering	[OK] Good

Rendering Pipeline

Dynamic route segments determine which page component to load based on URL parameters. When using server-side rendering, data fetching delays block the rendering pipeline. Static generation or incremental static regeneration moves data fetching to build time or background, reducing blocking.

→Server-side Rendering

→Data Fetching

→HTML Generation

→Client Hydration

⚠️ BottleneckData Fetching during server-side rendering

Core Web Vital Affected

LCP

This affects the page load speed and server response time by determining how routes are matched and pages are rendered dynamically.

Optimization Tips

1Avoid fetching data on every request for dynamic routes to reduce server blocking.

2Use getStaticPaths with fallback blocking or incremental static regeneration for better LCP.

3Cache dynamic pages when possible to speed up repeat visits.

Performance Quiz - 3 Questions

Which dynamic route pattern improves Largest Contentful Paint (LCP) the most in Next.js?

A Using getStaticProps with getStaticPaths and fallback blocking

B Using getServerSideProps to fetch data on every request

C Fetching data on the client side after page load

D Using client-side routing without prefetching

DevTools: Performance

How to check: Record a page load in DevTools Performance panel, filter for 'Server' and 'Rendering' events, and check for long blocking times during data fetching.

What to look for: Look for long 'Server' tasks or 'Idle' time before first contentful paint indicating blocking data fetch.