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.

Practice

1. What does a catch-all route with [...param] do in Next.js?

easy

A. It matches any URL path that starts with the route prefix and captures the rest as an array.

B. It matches only a single fixed URL path exactly.

C. It matches URL paths but captures parameters as a string, not an array.

D. It disables dynamic routing for the page.

Solution

1. Step 1: Understand catch-all route behavior

   A catch-all route like [...param] matches any URL path that starts with the route prefix and captures all remaining parts.

2. Step 2: Recognize parameter type

   The captured parameter is an array of strings representing each part of the URL after the prefix.

3. Final Answer:

   It matches any URL path that starts with the route prefix and captures the rest as an array. -> Option A

4. Quick Check:

   Catch-all routes capture URL parts as arrays [OK]

Hint: Catch-all routes capture multiple URL parts as an array [OK]

Common Mistakes:

• Thinking catch-all captures a single string instead of an array
• Believing catch-all matches only exact paths
• Confusing catch-all with optional catch-all routes

2. Which of the following is the correct filename for a catch-all route in Next.js to capture all paths under /blog?

easy

A. blog/param.js

B. blog/[param].js

C. blog/[...param].js

D. blog/[[...param]].js

Solution

1. Step 1: Recall catch-all route syntax

   Catch-all routes use square brackets with three dots: [...param] to capture multiple segments.

2. Step 2: Match filename to route

   To capture all paths under /blog, the file must be named blog/[...param].js.

3. Final Answer:

   blog/[...param].js -> Option C

4. Quick Check:

   Catch-all filename uses [...param] syntax [OK]

Hint: Catch-all filenames always use three dots inside brackets [OK]

Common Mistakes:

• Using single brackets without dots for catch-all
• Confusing optional catch-all [[...param]] with catch-all
• Omitting brackets or dots in filename

3. Given a catch-all route file pages/shop/[...items].js and the URL /shop/electronics/phones/smartphones, what will be the value of items inside getServerSideProps?

medium

A. 'electronics/phones/smartphones'

B. ['phones', 'smartphones']

C. ['shop', 'electronics', 'phones', 'smartphones']

D. ['electronics', 'phones', 'smartphones']

Solution

1. Step 1: Identify catch-all parameter capture

   The catch-all route [...items] captures all URL parts after /shop as an array.

2. Step 2: Extract URL parts after /shop

   From the URL /shop/electronics/phones/smartphones, the parts after /shop are electronics, phones, and smartphones.

3. Final Answer:

   ['electronics', 'phones', 'smartphones'] -> Option D

4. Quick Check:

   Catch-all params = array of URL parts after prefix [OK]

Hint: Catch-all params are arrays of URL parts after the route prefix [OK]

Common Mistakes:

• Including the route prefix in the array
• Expecting a string instead of an array
• Missing some URL parts in the array

4. Consider this catch-all route file: pages/docs/[...slug].js. The developer tries to access slug.join('-') but gets an error. What is the likely cause?

medium

A. The slug parameter is undefined because the URL is /docs with no extra parts.

B. The slug parameter is a string, not an array, so join is invalid.

C. The file name should be [slug].js instead of catch-all.

D. The catch-all route does not support arrays.

Solution

1. Step 1: Understand catch-all behavior with no extra path

   If the URL is exactly /docs with no extra parts, the catch-all slug parameter is undefined.

2. Step 2: Reason about calling join on undefined

   Calling join on undefined causes an error because join is an array method.

3. Final Answer:

   The slug parameter is undefined because the URL is /docs with no extra parts. -> Option A

4. Quick Check:

   Catch-all param undefined if no extra URL parts [OK]

Hint: Catch-all param is undefined if URL has no extra segments [OK]

Common Mistakes:

• Assuming catch-all param is always an array
• Confusing catch-all with optional catch-all routes
• Not checking for undefined before using array methods

5. You want to create a catch-all route in Next.js that matches /profile and any deeper paths like /profile/settings/privacy. Which filename should you use to make the parameter optional and avoid errors when no extra path is given?

hard

A. profile/[...params].js

B. profile/[[...params]].js

C. profile/[params].js

D. profile/params.js

Solution

1. Step 1: Understand optional catch-all syntax

   To match both /profile and deeper paths, use optional catch-all syntax with double brackets: [[...params]].

2. Step 2: Recognize difference from regular catch-all

   Regular catch-all [...params] requires at least one path segment; optional catch-all [[...params]] allows zero or more segments.

3. Final Answer:

   profile/[[...params]].js -> Option B

4. Quick Check:

   Optional catch-all uses double brackets [[...param]] [OK]

Hint: Use [[...param]] for optional catch-all routes [OK]

Common Mistakes:

• Using single brackets for optional catch-all
• Expecting regular catch-all to match empty paths
• Naming files without brackets