Different query params in getStaticProps cause ignore cache

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.17.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Hello, when I enter in my application like https://myapp.com/offer/1?utm_source=twitter then I receive a cached page (I’m using ISR), the code:

// File: pages/offer/[id]/index.js

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

export async function getStaticProps(context) {
  const { offer } = await getOffer(context.params.id);

  return {
    props: {
      offer,
    },
    revalidate: 300,
  };
}

BUT, if I enter in https://myapp.com/offer/1?utm_source=facebook, the getOffer function is called again, even with revalidate prop. How do avoid this? I need the same page without a new api call.

Expected Behavior

The same page without a new api call

To Reproduce

// File: pages/offer/[id]/index.js

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

export async function getStaticProps(context) {
  const { offer } = await getOffer(context.params.id);

  return {
    props: {
      offer,
    },
    revalidate: 300,
  };
}

• enter in https://myapp.com/offer/1?utm_source=twitter
• enter ir https://myapp.com/offer/1?utm_source=facebook

[hatsumatsu]

This is a valid concern. Many sites face randomized query parameters from third parties they can not control which produces a huge amount of computation on hosts like vercel.

[styfle]

Would still be great to have a fix for this in nextjs to account for generic nodejs hosting solutions.

I tried the steps to reproduce and it only reproduces on Vercel, not with next start. Therefore, the fix is only for Vercel.