When Next.js is deployed to Vercel, the ISR prefetching of the exact same page is done in triplicate.

[johnvonneumann7]

#290 Similar questions

I thought there might be a problem on the API server side, but when I ran the Next.js project in a local environment, this problem did not occur at all.

Specifically, getStaticProps is executed in triplicate, and if you check the Function log in Vercel, the log is duplicated.
If you look at the Network from Chrome devtools, the .json is only loaded once.

If you check the access log of the API server, you will see that the exact same API route is accessed three times during prefetching.
We can see that the exact same API route was accessed three times during prefetching.

I've been researching these symptoms for a few days now, but I can't find any information about them.
I have no idea what might be causing it.

I think the problem is in Vercel.
What is it and how can I fix it?

This happens even if I just run create-next-app, rewrite index.tsx and add [pk].tsx。

// index.tsx
import React from "react";
import Link from "next/link";
import axios from "axios";

export default function Home({ data }: any) {
  return data.map((video: any) => (
    <div key={video.pk}>
      <Link href={`/videos/${video.pk}`} prefetch={false}>
        {video.title}
      </Link>
    </div>
  ));
}

export async function getServerSideProps() {
  const res = await axios.get("https://api.example.com/videos/");

  return {
    props: {
      data: res.data.results,
    },
  };
}

// [pk].tsx
import React from "react";
import { GetStaticProps } from "next";
import axios from "axios";

export default function Video({ data }: any) {
  return <div>{data.title}Z</div>;
}

export function getStaticPaths() {
  return { fallback: "blocking", paths: [] };
}

export const getStaticProps: GetStaticProps = async ({ params }: any) => {
  const { pk } = params!;

  try {
    const res = await axios.get(`https://api.example.com/videos/${pk}/`);

    return {
      props: {
        data: res.data,
      },
      revalidate: 60 * 15,
    };
  } catch {
    return { notFound: true };
  }
};

[Pieparker]

Hey @johnvonneumann7, appreciate you reaching out! We'll close this thread out as a duplicate of #290 but thank you for sharing your use case and context.

Keeping this discussion under one roof allows us to make sure that, where necessary, our team can feed back to everybody much easier. Similarly, it allows y'all to collaborate much more effectively!