vercel/next.js

NextJS 15 Link broken after cache invalidation

Opened this issue · 0 comments

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Thu Dec 21 02:29:41 PST 2023; root:xnu-10002.81.5~11/RELEASE_ARM64_T8122
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 23.0.0
  npm: 10.9.0
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 15.1.2 // Latest available version is detected (15.1.2).
  eslint-config-next: 14.2.16
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.2
Next.js Config:
  output: N/A

Which example does this report relate to?

None

What browser are you using? (if relevant)

Chrome 131.0.6778.86

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am using NextJS App router to build my app. I use following server actions to load initial page data (getChatbot) and to mutate it (unlockChatbot). If I unlock the chatbot, it sends a request to our backend and sets an "unlocked" state in a client component.

// Chatbot Actions
export async function getChatbot(
  chatbotId: string,
): Promise<APIResponse<client.GetChatbotResponse>> {
    return await callAPI<client.GetChatbotResponse>(() =>
      zpps.chatbot.getChatbotChatbotIdGetRaw(
        {
          chatbotId,
        },
        { next: { tags: ["chatbot"] } },
      ),
    )
}

export async function unlockChatbot(
  chatbotId: string,
  displayWarning?: boolean,
): Promise<APIResponse<client.UnlockChatbotResponse>> {
    revalidateTag("chatbot")
    return await callAPI<client.UnlockChatbotResponse>(() =>
      zpps.chatbot.unlockChatbotChatbotIdUnlockPutRaw({
        chatbotId,
        unlockChatbotRequest: {
          displayWarning,
        },
      }),
    )
}

I also have side bar in my app with NextJS Link elements.

<Link
            key={link.name}
            prefetch={false}
            href={disabled ? "#" : link.href}
            onClick={(e) => {
              if (disabled) {
                e.preventDefault()
                setDialogOpen(true)
              }
            }}>
...
</Link>

The problem is that if I unlock the chatbot, the Links in side nav stop working for a few seconds, maybe a minute. After a few seconds I see following warning in the browser console:

The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Then after another couple of seconds they start working again. If I remove the revalidateTag("chatbot"), the Links work instantly, but then I have problem when someone unlocks a chatbot, navigates somewhere else and then navigates back. Without revalidateTag the chatbot would be locked again until I reload the page.

Expected Behavior

The cache is invalidated and the Link will redirect me instantly.

To Reproduce

It is proprietary code, I can't share it.