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.