I Can't Disable Vercel Data Cache?

[OatsProgramming]

Problem Description

Note: this is a repost of this discussion since there are more people here in vercel/next.js than there is in vercel/vercel

Im trying to get around its “automatic caching” system since its giving me stale data every time.

I’ve set cache: no-store and no-cache and that didnt work
next: { revalidate: 0 } and that still gave me old data:

I've added this at the top lvl of the module & in my specific route:

export const fetchCache = 'force-no-store';

I've done the following for my specific fetch:

const res = await fetch('api/example', { cache: 'no-store' });
const res = await fetch('api/example', { cache: 'no-cache' });
const res = await fetch('api/example', { next: { revalidate: 0 });
const res = await fetch('api/example', { cache: 'no-store', next: { revalidate: 0 });
const res = await fetch('api/example', { cache: 'no-cache', next: { revalidate: 0 });

Checked their docs for Vercel Caching and did the following for my backend:

let cacheControl = 'public, s-maxage=1000, stale-while-revalidate=500'
        if (toCache.has(slug[0])) cacheControl = 'public, s-maxage=3600, stale-while-revalidate=1800'

        return new Response(stringifyResult, {
            status: 200, 
            headers: {
                'Content-Type': 'application/json',
                'Cache-Control': cacheControl,
                'Vercel-CDN-Cache-Control': 's-maxage=1000',
                'CDN-Cache-Control': 's-maxage=1000'
            }
        })

Even though I've set it to simply a 1000s, I'd get stale data still by the next day. Set to 0 to see if it'll do anything: still the same result

I've also added the following vercel.json file:

{
    "headers": [
      {
        "source": "/api/INSERT_ROUTE/route.ts",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, s-maxage=3600, stale-while-revalidate=1800"
          }
        ]
      },
      {
        "source": "/api/INSERT_ROUTE2/route.ts",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, s-maxage=3600, stale-while-revalidate=1800"
          }
        ]
      }
    ]
  }

Im still getting stale data

Ive purged the vercel data cache (which worked temporarily as expected) but i’d get stale data the next day or whenever new data is supposed to come

[nayanprasad]

It seems like you're experiencing issues with caching and getting stale data in your Next.js application deployed on Vercel. Caching can be a complex topic, but I'll try to provide some guidance to help you troubleshoot the issue.

cache and next options in fetch:
When using fetch in Next.js, the cache and next options you mentioned ({ cache: 'no-store' }, { cache: 'no-cache' }, and { next: { revalidate: 0 } }) are not valid options for the fetch function. Therefore, they won't have any effect on the caching behavior.

Cache-Control headers:
In your backend code, you're setting the Cache-Control header to control caching behavior. The cacheControl variable determines the caching behavior based on the toCache condition. However, the cache duration you specified (s-maxage=1000 and s-maxage=3600) is relatively short. If you want to ensure that fresh data is always served, you can try setting the Cache-Control header to no-cache instead of specifying a short duration.

'Cache-Control': 'public, no-cache'

Additionally, make sure that your backend responses are being cached correctly. You can verify this by checking the Cache-Control header in the network tab of your browser's developer tools.

Vercel configuration:
The vercel.json file you provided seems to set the caching headers correctly for specific routes. However, note that the vercel.json file is used to configure the Vercel platform, not your application code. Make sure that the source paths in the vercel.json file correspond to the correct routes in your application.

Purging the cache:
Purging the Vercel cache is a way to force the cache to be invalidated and fetch fresh data. However, it's not a long-term solution and shouldn't be relied upon to avoid stale data issues. Instead, focus on configuring caching headers properly to ensure that fresh data is always requested when needed.

Client-side caching:
Keep in mind that even if you disable caching on the server-side, the client-side cache may still serve stale data. Make sure to add appropriate cache control headers (Cache-Control: no-store) for client-side caching as well

[OatsProgramming]

I really do hope that this isnt an AI generated answer ( because that is a very AI response. )

cache and next options in fetch:
When using fetch in Next.js, the cache and next options you mentioned ({ cache: 'no-store' }, { cache: 'no-cache' }, and { next: { revalidate: 0 } }) are not valid options for the fetch function. Therefore, they won't have any effect on the caching behavior.

That is completely incorrect. This info can be found here in the vercel docs and here in the next.js docs.

Additionally, make sure that your backend responses are being cached correctly. You can verify this by checking the Cache-Control header in the network tab of your browser's developer tools.

Again, a very AI response. I've provide my code as to how it would look like on my backend yet I was given a vague answer. If I wanted to, I would've done the same thing and simply copy-paste to ChatGPT. Please, provide answers that are thoroughly thought out and not generated.

Vercel configuration:
The vercel.json file you provided seems to set the caching headers correctly for specific routes. However, note that the vercel.json file is used to configure the Vercel platform, not your application code. Make sure that the source paths in the vercel.json file correspond to the correct routes in your application.

I've read the docs and know that this is used for Vercel. It has "vercel.json" in the name.

There are way too many parts in this "answer" that are just wrong. I shall say it again:

Do not use AI to answer these sort of questions.

[OatsProgramming]

After starting from scratch and making sure that there are no other variables, I've re-implemented the "solutions" to my problem.

// i.e.
const res = await fetch('api/example', { cache: 'no-store' });
const res = await fetch('api/example', { cache: 'no-cache' });
const res = await fetch('api/example', { next: { revalidate: 0 });
const res = await fetch('api/example', { cache: 'no-store', next: { revalidate: 0 });
const res = await fetch('api/example', { cache: 'no-cache', next: { revalidate: 0 });

I found that fetch("api/example", { next: { revalidate: 0 }} to be the way to disable Vercel's Data Cache. However, in the docs, its stated:

Disabling Vercel Data Cache

Use the following in your Next.js application to opt out of fetch caching:
export const fetchCache = 'force-no-store';
You can also opt out individual fetches by using the cache option:
const res = await fetch('https://example.com', { cache: 'no-store' });

However, this doesn't opt out of fetch caching. I'm not sure if I'm just doing something wrong or the documentation is, but all I know that is the solution provided didn't work. Does anyone have this problem?

[mickaelramanitrera]

I do have the same problem 😞

[SebastianPlace]

I tried every option under the sun and the only way I managed to get fresh data is to: export const revalidate = 0; in my route handler.

Example:

/app/api/blah/route.ts

import { NextResponse } from 'next/server'

export async function GET() {
  const someData = { "reasonsICryMyselfToSleepAtNight": ["caching"] }
  return NextResponse.json(someData)
}

export const revalidate = 0;

[haseebkhan9081]

thank you so much man ,you just saved me

[mickaelramanitrera]

What worked for me so far is "forcing" the revalidation of the route with an utility function like this :

import { revalidatePath } from "next/cache";
import { NextRequest } from "next/server";

export const forceRevalidate = (request: NextRequest) => {
  const path = request.nextUrl.searchParams.get("path") || "/";
  revalidatePath(path);
};

And then calling it first in the route handlers :

export const GET = async (request: NextRequest) => {
  forceRevalidate(request);
  
  // YOUR-CODE
}

[RobIsHere]

Caching by opt-out instead of opt-in is like jumping out of an airplane without parachute "by default" and hoping to not miss the one you threw out earlier on your way down. So from now on we can use next only for small hobbyist pages outside of business context. Everything else is too dangerous because of data loss when the user works on stale data and saves that or tries to save and may not because of OCC.

There needs to be exactly 1 masterswitch to configure caching as opt-in by default. Honestly no experienced professional can take next seriously anymore until this is implemented.

[carlomallone]

This is awful.

[leerob]

If you are trying to opt-out of caching inside of Next.js (and thus the Vercel Data Cache when deployed to Vercel), you can use the route segment configuration options.

export const fetchCache = 'force-no-store'

Here's the documentation which is accurate. However, it sounds like there is some confusion about the different layers of caching in Next.js.

We know this isn't as clear as it could be right now and we're working to improve this in the documentation.

Please see this PR for more details: vercel/next.js#52514

[RobIsHere]

For me it's not only about fetchCache. It's also that I read somewhere that the rendered server components are going to be cached, too. It's also about stale html pages delivered from the server. It's about stale image data. It's about everything that caches.

Caching in Entity Framework has for example been a not-working drama where they were unable to "fix" caching in more than 5 years with the ms manpower in the later case.
I had whole projects on the edge of total failure because of this and I had to put a lot of man hours into that to replace these frameworks to get rid of their caching layers with their false promises altogether and save my projects - successfully. That can happen when you have not-wanted caching by default.

We also had a data-loss incident related to your swr library in combination with another authentication library because of revalidation errors. It's not happened because of wrong code in swr. But swr also has not been robust enough to get along with the problems on authentication. So revalidation failed silently and the customer worked on stale data. Later when revalidation succeeded again all his data was gone. You see, that's also a problem with caching.

For me caching by default is just a red flag and I assume for a lot of other people with more than just hobbyist experiences annd a broader perspective on prior work in c#, java (same problem with hibernate as with EF), or if you want a js example ember data (where caching is slower than refetching by a factor of 1000 at least).

Something like patching fetch to cache by default just makes me ask: what are they going to patch next?

Your docs page is great and long. But the time comes when only 1 developer forgets 1 opt-out somewhere. And then I have a customer on the phone asking why his data has been overwritten by old data - or if I have OCC why he is unable to save (stale occ version he started editing on) - why he has an old image in his new report (stale server html) and so on...

My descision stands. Even with docs and all the efforts. Thats a big red flag for me and I'm opting out of next.js for so long a I can't just set a masterswitch at the config to "caching-strategy": "opt-in" and everything - really everything, not just fetch, is configured that way.

[kikohz]

After trying many solutions without any effect, none of them worked. Then I added a timestamp at the end of the request, and it worked.

const timestamp = Date.parse(new Date().toString());
const res = await fetch(`/api/cart/list?tid=${timestamp}`, {
      method: "GET",
});

[nevesm]

Awesome workaround hahaha

[maccman]

  I just lost half a day to this as well. I've been using the latest Next.js with the Neon database and adapter. I was banging my head against the wall trying to figure out why the database was saying one thing but the Next.js app was returning something completely different. I don't think this kind of thing should be enabled by default.

[adriantori]

never have this problem before, but when you do, its definitely worse than installing windows 11.
this is my last project using nextjs and deploying to vercel.
add global opt-out / opt-in next time in your site m8.
peace out.

[ic-768]

Caching has also been a headache for me on my latest project (ic-768/next-blogs). Specifically when hosting on vercel.

The issue is when I try to create a new blog on my server, then navigate to the /dashboard route to see a list of all blogs (which should be updated with the new entry).

• Locally in dev mode : the new blog is there
• Locally in prod mode: the new blog is there
• Hosting on render: the new blog is there
• Hosting on vercel: you guessed it - blog isn't there

I've tried all of the 'opt-out' mechanisms, route segment config, etc. Nothing seems to work.
Again. It doesn't seem to be a nextJS issue, but a vercel one. It works on literally every other platform except vercel.

[haseebkhan9081]

Netlify has the same problem i have tried it there as well😅

[haseebkhan9081]

Have you tried

import { NextResponse } from 'next/server'

export async function GET() {
const someData = { "reasonsICryMyselfToSleepAtNight": ["caching"] }
return NextResponse.json(someData)
}

export const revalidate = 0;

Cause it worked for me

[ic-768]

I did try that. Unfortunately didn't help