Back to results for “Rendering (SSR/SSG/ISR)”
Next.js › Pages Router Data Fetching (getStaticProps, getServerSideProps & getStaticPaths)

What are the different fallback options available in getStaticPaths, and how do they behave differently?

Intermediate

Answer

Setting fallback to false means any path not listed results in a 404 page, setting it to true shows a fallback loading state while generating the page on the first request and caching it afterward, and setting it to blocking waits to render the full page on the server before responding, without showing any fallback state at all.
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }],
    fallback: 'blocking'
  };
}
Real-world example A large marketplace with millions of listings uses fallback blocking so new product pages generate fully on their first visit without showing a jarring incomplete loading state to the very first visitor.

Common follow-ups: Which fallback option is best for a site with an extremely large number of pages?;How does fallback true handle showing a loading state on the client?