What are the fallback options in getStaticPaths?

Question

Accepted Answer

In the Next.js Pages Router, the `fallback` option in `getStaticPaths` determines what happens when a user requests a dynamic route path that wasn't pre-rendered at build time. This is essential for balancing build speed, user experience, and SEO when dealing with large sites where pre-rendering every possible path is impractical. The three options—`false`, `true`, and `'blocking'`—offer different trade-offs between showing content immediately and generating pages on-demand. // pages/products/[id].js export async function getStaticPaths() { // Fetch only popular products to pre-render at build time const res = await fetch('https://api.example.com/products/popular'); const popularProducts = await res.json(); const paths = popularProducts.map((product) => ({ params: { id: product.id }, })); return { paths, // Choose one of three fallback options fallback: false, // or true, or 'blocking' }; } export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/products/${params.id}`); const product = await res.json(); return { props: { product }, revalidate: 3600, // Optional ISR configuration }; } Behavior: Any paths not returned by `getStaticPaths` will result in a 404 page . Use Case: Ideal for small sites with a fixed, known set of content that doesn't change often, like a personal blog with 20 posts . Advantages: Fastest build time for the paths that are generated; simple and predictable behavior . Disadvantages: Not suitable for large sites; new content requires a full rebuild . SEO Impact: 404 pages are properly returned, which is fine for non-existent content but problematic if new content is added frequently . // pages/blog/[slug].js export async function getStaticPaths() { // Only 3 blog posts exist and we know all of them const paths = [ { params: { slug: 'hello-world' } }, { params: { slug: 'nextjs-guide' } }, { params: { slug: 'react-tips' } }, ]; return { paths, fallback: false, // Any other slug (like 'new-post') will 404 }; } export async function getStaticProps({ params }) { // This only runs for the 3 pre-defined paths const post = await getPostBySlug(params.slug); return { props: { post } }; } // User visits /blog/new-post → Shows 404 page immediately Behavior: Shows a fallback version of the page immediately while generating the full page in the background. Once generated, the page is cached and future requests get the static version . Use Case: Large e-commerce sites with thousands of products where you want to pre-render popular items but still support long-tail content . Advantages: Fast initial page load (shows fallback UI), supports infinite content without rebuilding, good user experience . Disadvantages: You must handle a loading state in your component; slightly more complex implementation . SEO Impact: The fallback page isn't considered a valid page by search engines, but once generated, the full page is indexable . // pages/products/[id].js import { useRouter } from 'next/router'; export default function Product({ product }) { const router = useRouter(); // If the page is not yet generated, this will be displayed first if (router.isFallback) { return

Loading product details...

; } return (

{product.name}

{product.description}

Price: ${product.price}

); } export async function getStaticPaths() { // Pre-render only popular products at build time const popularProducts = await fetch('https://api.example.com/products?popular=true') .then(res => res.json()); const paths = popularProducts.map((product) => ({ params: { id: product.id }, })); return { paths, fallback: true, // Other products will be generated on-demand }; } export async function getStaticProps({ params }) { const product = await fetch(`https://api.example.com/products/${params.id}`) .then(res => res.json()); return { props: { product }, revalidate: 3600, // Revalidate every hour }; } // User visits /products/123 (not pre-rendered): // 1. Shows "Loading product details..." immediately // 2. Next.js generates the page in background // 3. Future visits get the static HTML Behavior: The user waits for the server to generate the page on the first request. No fallback UI is shown; the request blocks until the page is generated, after which it's served and cached . Use Case: SEO-critical pages where you don't want search engines to see a loading state, like product pages that need to be indexed immediately . Advantages: Better for SEO since crawlers never see a fallback state; simpler component code (no need to check `router.isFallback`) . Disadvantages: Slightly slower first-page load for new paths as the user waits for generation to complete . Behavior with ISR: When combined with `revalidate`, the page will be served from cache after the first gene

Option	First Visit	Subsequent Visits	SEO	Use Case
false	404 immediately	404	❌ No page	Fixed, small sites
true	Fallback UI → background gen	Static HTML	⚠️ Fallback not indexed	Large sites, good UX
'blocking'	Waits → generated page	Static HTML	✅ Full page indexed	SEO-critical, large sites

What are the fallback options in getStaticPaths?

getStaticPaths offers three fallback options: false, true, and 'blocking' that control how non-pre-rendered paths are handled

What are the fallback options in getStaticPaths?

getStaticPaths offers three fallback options: false, true, and 'blocking' that control how non-pre-rendered paths are handled

Scenario Questions

Follow-up Questions