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

"my next application is making a ton of requests to my backend on page load" - Is this on a _single_ page load? Are you seeing the fetch request inside your `getStaticProps` happening multiple times for a single page request? — juliomalves, Mar 31 '21 at 17:51
This is expected on Vercel and _not_ an issue with your application. It doesn't cause any drop in performance. It's part of how our proxy handles incrementally generating pages. — leerob, Apr 02 '21 at 18:23
It does cause a drop in performance for me as it's hitting my server with multiple requests for the same information causing some staggering. But if that's the way it works guess there's nothing I can do — Scott O'Dea, Apr 06 '21 at 00:04
@leerob this is causing a spike in usage with all the service providers that I hit during `getStaticProps`, even my logging service is getting flooded with logs because of it. I'm seeing a 3x usage increase due to this. — M.K. Safi, Jun 09 '22 at 02:13

score 2 · Answer 1 · answered Jan 09 '22 at 20:15

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 },
  };
};

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

1 Answers1