NextJS - Netlify cache doesn't take into account query parameters by default

Support
1

Hello guys

It looks like Netlify doesn’t take account query parameters on SSR pages in NextJS /pages router.

Example these 2 requests returns the same data for us:

https://coh3-stats-dev.netlify.app/_next/data/3wfhIyuys3kJpwlm-6mxt/leaderboards.json?race=german&type=1v1
https://coh3-stats-dev.netlify.app/_next/data/3wfhIyuys3kJpwlm-6mxt/leaderboards.json?race=german&type=2v2

Our cache headers are setup like this:

    res.setHeader("Cache-Control", "public, max-age=30, s-maxage=60, stale-while-revalidate=120");

We don’t have any header modification in next.config.js / we don’t use any middleware to mess with anything. We are on:

@netlify/plugin-nextjs": "5.8.1",
"next": "14.2.18",
"netlify-cli": "17.37.2",

netlify.toml

[[plugins]]
package = "@netlify/plugin-nextjs"

[build]
command = "yarn next build"
publish = ".next"

From the docs I can see that the query parameters should be part of the cache?

So - the question is why is that not happening? Why is the cache key the same? Do we have setup extra netlify configs for this? (I think query should be part of cache key without any configs)

Btw we migrated from another NextJS provider - and our app worked there without any troubles.
Thank you

2

We had to fixt his by adding this into next config

  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "Netlify-Vary",
            value: "query",
          },
        ],
      },
    ];
  },

Although as said before - I have no idea why we have to setup this. I would expect that query parameters are part of the cache key by default - because every other CDN provider behaves that way.

1 Like
4

No, Next.js ignores query params by default in caching because you can have query params like ?utm_source which would come from Google/Facebook URLs or Analytics data that would create unnecessary cache variations. So this is the current expected behaviour. I’d really advise against varying all query params.

5

Thanks for the response. I understand the use-case with the extra query parameters. But I would like to point out that ignoring the query in cache key is not feature from NextJS - that’s a feature from Netlify or Netlify Next plugin.

Simply put – NextJS applications deployed on Netlify behaves differently then the same app deployed on Vercel or AWS or on prem.