Catch-all routes with [...param] in NextJS - Performance & Optimization

Performance: Catch-all routes with [...param]

MEDIUM IMPACT

This affects page load speed and routing performance by how Next.js matches and renders dynamic routes.

Handling dynamic nested routes in Next.js

NextJS

pages/[...param].js

import { useMemo } from 'react';

export default function Page({ params }) {
  const path = useMemo(() => params.param?.join('/') ?? '', [params.param]);
  return <div>{path}</div>;
}

export async function getStaticPaths() {
  return { paths: [], fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  // fetch minimal data
  return { props: { params } };
}

Using getStaticPaths with fallback blocking reduces server load and enables partial static generation, improving load speed.

📈 Performance GainReduces server blocking time by 50-70ms, enables caching, and keeps bundle size minimal

Handling dynamic nested routes in Next.js

NextJS

pages/[...param].js

export default function Page({ params }) {
  // heavy logic to parse params and fetch data
  return <div>{params.param?.join('/')}</div>;
}

// No caching or static optimization

This catch-all route handles all paths, causing Next.js to disable automatic static optimization and increasing server load.

📉 Performance CostBlocks rendering for extra 100-200ms on server, increases bundle size by ~10kb due to dynamic imports

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Catch-all route without static paths	Minimal DOM nodes	1 reflow on render	Low paint cost	[!] OK
Catch-all route with getStaticPaths and fallback blocking	Minimal DOM nodes	1 reflow on render	Low paint cost	[OK] Good

Rendering Pipeline

Catch-all routes trigger dynamic route matching, which affects server-side rendering and static generation. The browser receives fully rendered HTML or fallback content depending on the route setup.

→Server-side Rendering

→Static Generation

→Routing

⚠️ BottleneckServer-side Rendering when fallback is 'blocking' or no static paths are prebuilt

Core Web Vital Affected

LCP

This affects page load speed and routing performance by how Next.js matches and renders dynamic routes.

Optimization Tips

1Avoid catch-all routes without getStaticPaths to prevent slow server rendering.

2Use getStaticPaths with fallback modes to enable partial static generation and faster loads.

3Monitor server blocking time in DevTools Performance panel to optimize route handling.

Performance Quiz - 3 Questions

What is a main performance drawback of using a catch-all route without getStaticPaths in Next.js?

A It causes excessive DOM nodes to be created.

B It increases client-side JavaScript bundle size by 100kb.

C It disables automatic static optimization causing slower server-side rendering.

D It triggers multiple layout shifts on page load.

DevTools: Performance

How to check: Record a page load with catch-all route, look for server-side rendering time and blocking time in the flame chart.

What to look for: Long server blocking times indicate slow dynamic route handling; shorter times with static paths show better performance.