getStaticProps Page get requested 3 times instead of 1 on Vercel

[O4epegb]

So I have quite simple app, with basically 1 dynamic page.

It has

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  return {
    fallback: 'blocking',
    paths: [],
  };
};

and getStaticProps handler with 1 api request and revalidate: 300

export const getStaticProps: GetStaticProps<Props, Params> = async ({ params }) => {
  if (!params) {
    return {
      notFound: true,
    };
  }

  try {
    const res = await createServerApi().api.get<Response>(`/players/${params.slug}`);

    return {
      revalidate: 300,
      props: {
        ...res.data,
      },
    };
  } catch (error) {
    if (!axios.isAxiosError(error)) {
      throw error;
    }

    if (error.response?.status === 404) {
      return {
        notFound: true,
      };
    }

    throw error;
  }
};

It works fine locally when I build and start application in production mode.
It works fine on VPS, where I basically do the same only through docker.

But on Vercel for some reason data for this page gets requested 3 times (before it gets cached).
Both on direct navigation and on Link prefetching (both default mode and on hover). There is only 1 request from browser, but my server (simple fastify app) bombed with 3 requests for every page. So if there are 10 Links with prefetch server actually gets 30 requests at the same time.

I don't quite understand why it happens, maybe I am using Vercel wrong.

For example, log from server:

{"level":30,"time":1627688496175,"pid":28,"hostname":"2946784bea1e","reqId":"req-10","req":{"method":"GET","url":"/api/players/SomeName","hostname":"[redacted]","remoteAddress":"172.18.0.1","remotePort":49648},"msg":"incoming request"}
{"level":30,"time":1627688496213,"pid":28,"hostname":"2946784bea1e","reqId":"req-11","req":{"method":"GET","url":"/api/players/SomeName","hostname":"[redacted]","remoteAddress":"172.18.0.1","remotePort":49652},"msg":"incoming request"}
{"level":30,"time":1627688496219,"pid":28,"hostname":"2946784bea1e","reqId":"req-12","req":{"method":"GET","url":"/api/players/SomeName","hostname":"[redacted]","remoteAddress":"172.18.0.1","remotePort":49656},"msg":"incoming request"}

As you can see there are 3 consecutive requests for the same page, and my getStaticProps function only has 1 api call, and as I said it works fine outside of Vercel.

I hope I've explained everything clearly enough. Ready to answer other questions, thanks everyone in advance :)

[O4epegb]

My issue is still actual, still not quite understand why it is happening.

It seems similar to vercel/vercel#6581, but not quite. I don't understand why for prefetching link Vercel does 3 requests? (basically runs getStaticProps 3 times)

[O4epegb]

So I am not quite understand it. 1 request for JSON payload, ok. 1 request for prefetch (why? why not reuse first request for payload?), and third for what?

This logs are not from Next.js app, it is from backend fastify app. So Next.js app invokes same getStaticProps function (which makes request to the backend) 3 times, why not just 1 time?

10 links on the page => backend gets 30 requests. It does not seem normal for me, seems like a bug?

[O4epegb]

I want to emphasise on this:

It works fine locally when I build and start application in production mode.
It works fine on VPS, where I basically do the same only through docker.

3 requests only happen on Vercel.

[leerob]

This logs are not from Next.js app, it is from backend fastify app.

Wait, we're talking about two completely different things here 😄 My bad - I think I misunderstood your initial question with the other question linked.

So Next.js app invokes same getStaticProps function (which makes request to the backend) 3 times, why not just 1 time?

Could you share a repo that you're seeing getStaticProps make three requests to your backend? Without seeing createServerApi and related code it's really hard to tell what you're doing.

[O4epegb]

createServerApi is just a wrapper around axios instance. But sure, I'll make a reproduction

[O4epegb]

Here we go https://github.com/O4epegb/vercel-request-bug

It's not easy to reproduce, I mean you need to deploy fastify app somewhere to check the logs, maybe there is easier way, I don't know

Let me know if I can help with something else, or if Readme guide is not helpful

[leerob]

Answered in vercel/vercel#6581 (comment).

[kristjanmar]

I may have the same or a similar issue. Almost all requests to pages with getStaticProps show at least 2 times in the Vercel function logs.

See screenshot: https://prnt.sc/1qf5ehr
Another: https://prnt.sc/1qf5fi3

Does this also mean that these functions are counting twice towards the serverless function usage limit?

[johnvonneumann7]

Currently I am experiencing this exact same problem.
Did you solve this problem?

[johnvonneumann7]

Is this a problem that is occurring with everyone using ISR?
I need something like ISR to protect my weak backend server.

[O4epegb]

Yes, this is still happening to my app with ISR. I've implemented cache on my side, but would love to see it actually resolved by Vercel

[johnvonneumann7]

I've only tested the hobby plan, could that be the cause?

[O4epegb]

I mean, it seems like it's a bug, why would they need to make 3 requests instead of 1 on Hobby plan only? Unlikely I would say

[johnvonneumann7]

I agree very much. I also don't understand why this issue has been left unresolved for half a year.