CODEWITHSUNDEEP
next.js
Michael Flores
Michael Flores

Reputation: 726

Why does next.js call getStaticPaths on every load of a page?

I have a series of product detail pages I'm pre-rendering, and expected that within the revalidation period Next would not need to call getStaticPaths when refreshing the page I'm on. Similar to their example here I wanted to pretender a number of top products. I found that in development, it was calling getStaticPaths on every refresh or URL change even when it was to the page I'm already on. The problem this surfaces is that during development, when testing functionality requiring a URL param change, getStaticPaths would be called and the page would be unresponsive during this time. In the example below, I'd rather get 1000 products, but reduced to 10 so I could develop.

TL;DR why does Next.js call this function on every page load, and is this a development-only behavior?

export const getStaticPaths = async () => {
  console.log("Getting static paths");
  let listingHandles: { __typename: string; handle: string }[] = [];
  // fetch 10 product handles at a time, the api is sensitive
  async function* productOffsetGenerator() {
    let offset = 0;
    while (offset < 10) {
      yield (offset += 10);
    }
  }

  for await (const offset of productOffsetGenerator()) {
    const { data } = await apolloClient.query({
      query: GET_LISTINGS_HANDLE,
      variables: {
        offset,
      },
    });
    listingHandles = [...listingHandles, ...data.listedListings.listings];
  }

  const paths = listingHandles.map((edge: { handle: string }) => ({
    params: { handle: edge.handle },
  }));

  return {
    fallback: "blocking",
    paths,
  };
};

Upvotes: 1

Views: 998

Answers (1)

Michael Flores
Michael Flores

Reputation: 726

is this a development-only behavior

Confirmed this behavior does occur only in development.

Upvotes: 3

Related Questions