Enormous number of API requests using Incremental Static Generation with revalidation

Bug report

Describe the bug

On two websites, I have revalidation set ranging from 5 minutes to 1 hour. However, enabling any revalidation time leads to an astonishingly high number of requests to my API, with very low traffic.

To Reproduce

A typical getStaticProps in my apps might look like this:

export async function getStaticProps(context) {
  const navigationResponse = await fetchAPI(fetchNavigation);
  const response = await fetchAPI(fetchHomepage);
  const eventsResponse = await fetchAPI(fetchEvents, {
    limit: 12,
    orderBy: 'startDateTime ASC',
  });

  return {
    props: {
      page: response.page,
      navigation: navigationResponse,
      events: eventsResponse.events,
    },
    revalidate: 300,
  };
}

fetchAPI is a common API function that looks like this:

const fetchAPI = async (query, variables = {}, token = null) => {
  const url = token
    ? `${process.env.NEXT_PUBLIC_API_URL}?token=${token}`
    : `${process.env.NEXT_PUBLIC_API_URL}`;

  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_GRAPHQL_TOKEN}`,
      },
      body: JSON.stringify({
        query,
        variables,
      }),
    });

    const json = await res.json();

    if (json.errors) {
      console.error(json.errors);
      throw new Error(json.errors);
    }

    return json.data;
  } catch (error) {
    console.error(error);
    throw new Error(error);
  }
};

With revalidation enabled, and with hardly 10 visitors per hour, I’m seeing the API be hit almost 20,000 times per hour (!).

With revaliation disabled, my API is hit 0 times per hour.

Expected behavior

I’d expect the number of times my API hit with revalidation set to 300 seconds, be close to zero.

System information

• Version of Next.js: 9.5.4

[howells]

@hereisfahad not really but today I discovered an issue with a large number of <Links> on a page, where each was being prefetched when they came into view: with ~100 links, each to a page that had revalidation enabled, hundreds of requests were being made to the server. I simply set prefetch={false} (prefetch on hover still works)

[leerob]

@howells’s comment is accurate. If you have next/link on the page, you could be prefetching pages that have revalidation set up, increasing the number of requests. In that case, prefetch={false} is a great solution, thank you for suggesting that.

@dipankarmaikap the Vercel logs will show a request for the HTML page (from the Edge) as well as the Serverless Function (that’s doing the revalidation). This is expected! For further details into the logs, you can use log integrations too: https://vercel.com/integrations#logging