Dynamic routes with [param] in NextJS - Performance & Optimization

Performance: Dynamic routes with [param]

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how pages are generated and served based on URL parameters.

Serving pages based on URL parameters efficiently

NextJS

export async function getStaticPaths() {
  return { paths: [{ params: { param: 'a' } }, { params: { param: 'b' } }], fallback: false };
}

export async function getStaticProps({ params }) {
  const data = await fetchData(params.param);
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

Pre-generating pages at build time avoids client fetch delays and speeds up initial paint.

📈 Performance GainImproves LCP by 300-500ms, reduces client CPU and network load

Serving pages based on URL parameters efficiently

NextJS

export default function Page({ params }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch(`/api/data?param=${params.param}`)
      .then(res => res.json())
      .then(data => setData(data));
  }, [params.param]);
  if (!data) return <div>Loading...</div>;
  return <div>{data.content}</div>;
}

// No getStaticPaths or getServerSideProps used

Fetching data on client side causes slower initial load and delays Largest Contentful Paint.

📉 Performance CostBlocks rendering until client fetch completes, increasing LCP by 300-500ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetch in dynamic route	Minimal DOM nodes	1 reflow after data loads	High paint cost due to delayed content	[X] Bad
Static generation with getStaticProps and getStaticPaths	Minimal DOM nodes	Single reflow on initial paint	Low paint cost, fast content display	[OK] Good

Rendering Pipeline

Dynamic routes with [param] influence how Next.js fetches and renders page content either at build time or on request, affecting the critical rendering path.

→Server-side Rendering

→Static Generation

→Network

→Paint

⚠️ BottleneckNetwork and Server-side Rendering delay if data fetching is done client-side

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how pages are generated and served based on URL parameters.

Optimization Tips

1Pre-generate dynamic pages with getStaticProps and getStaticPaths when possible.

2Avoid client-side data fetching for initial page content to improve LCP.

3Use fallback options wisely to balance build time and user experience.

Performance Quiz - 3 Questions

What is the main performance benefit of using getStaticProps with dynamic routes in Next.js?

A Delays rendering until user interaction

B Fetches data on client side for faster interaction

C Pre-generates pages to reduce client load and improve LCP

D Increases bundle size for all pages

DevTools: Performance

How to check: Record page load in Performance tab, look for long network fetches and delayed Largest Contentful Paint event

What to look for: Long gaps before LCP event indicate client-side data fetching delays; faster LCP means better performance