ISR Test #5

This test supports a hyopthetical number of dynamic paths. The path param is id, and we're supporting IDs 1 - 5. IDs 1 - 5 will be returned from getStaticPaths. We've set fallback: true in getStaticPaths, meaning that any other id should build on demand in the background. This happens by getStaticProps running in the background, while the user immediately transitions routes during a client side transition. The prop router.isFallback on the next router should be true during this transition, allowing us to show loading states.

We're not validating against ids in getStaticProps, so theoretically, any id should work.

• ID #1
• ID #2
• ID #3
• ID #4
• ID #5
• ID #6
• ID #7
• ID #8

Code

export async function getStaticPaths() {
  return {
    paths: [
      {
        params: { id: '1' }
      },
      {
        params: { id: '2' }
      },
      {
        params: { id: '3' }
      },
      {
        params: { id: '4' }
      },
      {
        params: { id: '5' }
      }
    ],
    fallback: true,
  };
}

export async function getStaticProps(context) {
  const id = context.params.id;

  return {
    props: {
      id,
    },
    revalidate: 2,
  };
}

Local production build:

Vercel deployments: