getStaticPathsWithProps

[vibhanshu909]

A method to get all the static paths along with their props.

As of now for SSG nextjs provides us two methods:

1. getStaticPaths - for fetching all the paths whose page will be generated at build time.
2. getStaticProps - for fetching the required props for a page.

Now a page can SSG if no additional params are required ex: /privacy_policy in which case, only getStaticProps can be used to fetch the required props a build time.
But if a page needs additional params ex: /post/[slug] then, getStaticPaths & getStaticProps are used in conjuction, ex:

// /pages/post/[slug].jsx
// ------- page rendering logic here ------- 

export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  return {
    paths,
    fallback: true,
  }
}
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { 
    props: { post },
    revalidate: 1,
  }
}

The problem here is that we need to call the fetch API n+1 number of times, where n is the number of posts.
This doesn't seem to be a big problem at first but when the post increase to thousands and more, then the build time keeps increasing along, additionally it also increases the load on the API server(if someone has an API consumption limit, it will get exhausted quickly).

Suggested Solution

// /pages/post/[slug].jsx
// ------- page rendering logic here ------- 
export async function getStaticPathsWithProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
    props: { post },
    revalidate: 1,
  }))

  return {
    paths,
    fallback: true,
  }
}

There are 3 ways to solve this problem right now:

1. By generating pages at runtime instead of build time, ex:

// /pages/post/[slug].jsx
// ------- page rendering logic here ------- 

export const getStaticPaths = async () => {
  return {
    // passing empty array in paths, means we won't generate anyting at build time. Hence everything will be generated at runtime when a request for that path comes in.
    paths: [],
    fallback: true,
  }
}
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { 
    props: { post },
    revalidate: 1,
  }
}

2. Only generating a subset of the pages at build time and the rest at runtime ex:

// /pages/post/[slug].jsx
// ------- page rendering logic here ------- 

export const getStaticPaths = async () => {
  const res = await fetch('https://.../posts?limit=50')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  return {
    paths,
    fallback: true,
  }
}
// ...

3. Another option is by caching the data fetching API, ex: if we are fetching data from a service(CMS, Third-Party Services, etc), we cache the response, or if we are fetching data from a database, we cache the query result.