All 5 Dynamic Routes & Catch-All Segments questions
More in Dynamic Routes & Catch-All Segments
What is a dynamic route in Next.js, and how do you create one? What is a catch-all route segment, and when would you use one? What is an optional catch-all route segment, and how is it different from a regular catch-all segment? How do you pre-generate static pages for dynamic routes at build time using generateStaticParams?
Advertisement
Back to results for “Caching”
Next.js › Dynamic Routes & Catch-All Segments

How would you handle a very large number of dynamic pages, such as millions of products, without making the build take too long?

Advanced

Answer

You use generateStaticParams to pre-build only the most important or most visited pages ahead of time, and let the remaining pages generate on demand the first time they are requested using incremental static regeneration, caching them afterward so future visitors get the fast, pre-built version.
export async function generateStaticParams() {
  const topProducts = await getTopProducts(1000);
  return topProducts.map(p => ({ id: p.id }));
}

export const dynamicParams = true; // allow other ids to generate on demand
Real-world example A massive online marketplace with millions of listings only pre-builds its most popular thousand product pages at build time, letting the rest generate on their first visit and stay cached afterward.

Common follow-ups: What does the dynamicParams setting control in this scenario?;How do you decide which pages are important enough to pre-build?

Rendering (SSR/SSG/ISR);Caching
All 5 Dynamic Routes & Catch-All Segments questions