Vercel won't clear build cache, only works if I delete the project and re-create it

Answered

2023-12-27T14:07:19.000Z

I have a Next.js project which statically generates some pages (content is fetched), but on rebuild (e.g. via webhook or manually), it doesn't clear the .next cache, so it never updates. Even when I manually redeploy and make sure not to check the "use existing build cache" checkbox, it still reuses it. I also tried the VERCEL_FORCE_NO_BUILD_CACHE=1 env variable and adding forceNew=1 to the http endpoint that triggers the redeployment, still reuses the cache.

If I delete the entire project and create a new one from the same repository, it correctly rebuilds it.

Any ideas how to force the cache to be cleared on rebuild?

Answered by ୧ʕ•̀ᴥ•́ʔ୨

I found the issue, it was due to accessing searchParams on a statically generated page

View full answer

47 Replies

Ray

2023-12-27T14:23:15.000Z

there is a data cache on the setting page, could you try purge it from there?

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T14:26:02.000Z

That works, but ideally I want to be able to do that automatically, e.g. when I rebuild via webhook when content is updated (e.g. triggered from a CMS)

Ray

2023-12-27T14:28:17.000Z

you could create a webhook to revalidate the data for it

there is an example from doc, let me try to find it

Ray

2023-12-27T14:38:35.000Z

https://nextjs.org/docs/app/api-reference/functions/revalidatePath#route-handler

you could add a key in to query and only revalidate with correct key provided

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T14:56:48.000Z

Thanks, I'll try that. It does seem like a bug though that it's not possible to clear the cache with the usual methods.

I also just tried adding forceNew=1 to the v13/deployments http endpoint that triggers the redeployment (as per the docs here https://vercel.com/docs/deployments/troubleshoot-a-build#managing-build-cache), that didn't work either

Ray

2023-12-27T15:02:59.000Z

well its for build cache

not data cache

https://vercel.com/docs/infrastructure/data-cache

they are different

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T15:06:55.000Z

Ah I see, I assumed it's the same thing, I guess not

Ray

2023-12-27T15:32:17.000Z

well but it should refetch the data and update the cache when you rebuild

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T15:42:21.000Z

So I added a tag to my fetch

res = await fetch(path, { cache: "force-cache", next: { tags: ["test"] } });

And I have this in a route.ts:

import { NextRequest, NextResponse } from "next/server";
import { revalidateTag } from "next/cache";

export async function GET(request: NextRequest) {
    revalidateTag("test");
    return NextResponse.json({ revalidated: true, now: Date.now() });
}

I manually run the route handler in the browser and then trigger a rebuild, bit it doesn't refetch ðŸ™

Ray

2023-12-27T15:44:14.000Z

have you refresh the page?

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T15:58:56.000Z

Yep! The page is statically generated with generateStaticParams() if that makes any difference, that's why I'm doing a full rebuild. I tried adding revalidateTag("test") at the top of generateStaticParams, but it still doesn't work

~~It works on my local machine actually, when I build the project, just not on Vercel~~ Nevermind, doesn't work

Ray

2023-12-27T16:14:19.000Z

you shouldn't call revalidateTag("test") in there

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T16:15:09.000Z

So it actually seems to work on my local machine after more tests

If I do npm run build / npm run start it updates after every rebuild

Ray

2023-12-27T16:16:45.000Z

yes on every build it will refetch the data

revalidateTag/revalidatePath is for updating the data cache without rebuilding the site

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T16:18:55.000Z

Well my issue is on Vercel, the data doesn't get updated even after a full rebuild

Ray

2023-12-27T16:21:10.000Z

can you share a github repo?

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T16:27:27.000Z

It's private but I can set up a demo and share that

Ray

2023-12-27T16:42:16.000Z

yeah please do that so I can test on my side

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T21:49:28.000Z

I found the issue, it was due to accessing searchParams on a statically generated page

Answer

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T21:49:47.000Z

Although it did work at one point, doesn't seem to anymore

In the past I was able to force the page to be server rendered dynamically by adding a search param to the URL

But now this breaks the static generation somehow, it no longer updates, while the page with the param is still dynamic

I wanted to have a page that is static, but to force a dynamic preview by adding ?preview=true at the end

Ray

2023-12-27T21:52:33.000Z

when your page use the searchParams object, the page cannot be static generated

you should use draftMode for it
https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

୧ʕ•̀ᴥ•́ʔ୨OP

2023-12-27T21:53:44.000Z

It seems like with draft mode I can't have the same-ish URL as the original page

I wanted to have mysite.com/mypage/ be the static page and mysite.com/mypage?preview be the preview page

I wonder if I can make another route like /mypage/preview, maybe that would work, as I'll only generate /mypage/ statically, and mypage/preview is a different route, so can be dynamic

Ray

2023-12-27T21:56:38.000Z

yeah you could try it

just don't use searchParams on the page you want to be static generated