NextJS getStaticProps is making mulitple requests to the same endpoint with fallback: true

Question

I've noticed my next application is making a ton of requests to my backend on page load. I'm using getStaticPaths and getStaticProps for when a path wasn't built at build-time so the fallback is used. The multiple requests don't happen with getServerSideProps or even in my dev environment. Only when deployed to Vercel. I've tried even creating a tiny application using JSONplaceholder API but viewing the Vercel function logs it appears it still makes multiple requests.

import { useRouter } from "next/router";

export default function Home({ todos }) {
  const router = useRouter();
  if (router.isFallback) {
    return <p>Loading....</p>;
  }
  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre>
    </div>
  );
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

export async function getStaticProps() {
  const data = await fetch(`https://jsonplaceholder.typicode.com/todos`);
  const todos = await data.json();

  return { props: { todos }, revalidate: 10 };
}

Is this just how the fallback and cache work on Vercel? Thanks

Answer 1

You can easily make your whatever requests inside getStaticProps() builtin function because it is being run in build time and you can pass data of any requests through the props object such as code below

 export const getStaticProps = async () => {
  
      const res1 = await fetch('');
      const res2 = await fetch('');

  return {
    props: { res1,res2 },
  };
};