Cache-Control max-age not working after first revalidate

[ferrantecrafts-8194 (Ferrante)]

I am deploying a NextJs app on Vercel Preview.
I have set the next config to include cache-control with max-age=40. Tried it with and without immutable, this made no difference.
When I open the page the first time after every deployment, It caches the page browser side for 40 seconds.
After this however, it never caches browser side anymore, it always goes to the server for every request of the page.
If I build and start locally it does cache again after the revalidation which makes me think this is not browser related.

Current: Static pages with max-age set are not cached browser side after the first cache is revalidated.
Expected: Static pages with max-age set should cache browser side after the first cache is revalidated, like it does on a local deployment.

In next,config.ts I have set:

headers: async () => ([

    { 

      source: '/', 

      headers: [

        { 

          key:'Cache-Control', 

          value:'max-age=40, must-revalidate, immutable' 

        }

      ] 

    },

  ])

The page at this path is a static page.
As you can see below, it starts by chaching the page (from the first visit after deployment only), after the 40 seconds are done it keeps requesting the page on every visit.

[jacobparis]

set the value to just max-age=40

Cache-Control: max-age=40, must-revalidate means it caches, expires at 40s, then revalidates on every subsequent request and never becomes fresh again

If you remove must-revalidate, it will re-cache every 40 seconds which is what you want

You should also not use immutable here as that tells the browser it will never ever change. This is only for hash-fingerprinted assets

[ferrantecrafts-8194 (Ferrante)]

Thanks that worked! I thought this was the first thing I tried, but I probably had some other config when I did.