Cache Components `updateTag` works in dev and local build but not on Vercel (Next.js 16.1)
Unanswered
Nuitari posted this in #help-forum
NuitariOP
I'm seeing inconsistent cache invalidation behavior between local builds and Vercel when using Cache Components with
- App Router
- Cache Components
- Home page renders 10 product cards
- Each card includes cached server components
- Product editing happens in a parallel route sidebar
Route structure:
The sidebar allows editing a product while the home page remains visible.
Cached component
One of the components inside the product card looks like this:
Invalidation
After editing the product I call:
Observed behavior
Local (dev + local production build)
-
- The component re-renders
- My overlay showing the last server render timestamp updates
Vercel
-
- Cached fields like
- However dynamic fields (like stock) that are not cached update correctly
This suggests the
Question
Is there any difference in how
Could parallel routes or RSC boundaries affect tag invalidation in production?
Environment
Next.js: 16.1
Deployment: Vercel
Runtime: Bun
Node compatibility: Bun runtime
use cache + cacheTag in Next.js 16.1.Architecture- App Router
- Cache Components
- Home page renders 10 product cards
- Each card includes cached server components
- Product editing happens in a parallel route sidebar
Route structure:
/page
/@sidebar/(.)edit/[productId]The sidebar allows editing a product while the home page remains visible.
Cached component
One of the components inside the product card looks like this:
export async function ProductDescription({ id }: { id: number }) {
"use cache";
cacheTag(`description-${id}`);
const productData = await getProduct(id);
if (!productData) return null;
const { description } = productData;
const date = new Date();
return (
<UpdateHighlight updatedAt={date}>
<p className="text-sm leading-relaxed text-muted-foreground">
{description}
</p>
</UpdateHighlight>
);
}Invalidation
After editing the product I call:
updateTag(`description-${id}`)Observed behavior
Local (dev + local production build)
-
updateTag works- The component re-renders
- My overlay showing the last server render timestamp updates
Vercel
-
updateTag runs- Cached fields like
description do not update- However dynamic fields (like stock) that are not cached update correctly
This suggests the
"use cache" component tagged with cacheTag is not being invalidated on Vercel.Question
Is there any difference in how
updateTag works with the Vercel Data Cache vs local builds when using "use cache" components?Could parallel routes or RSC boundaries affect tag invalidation in production?
Environment
Next.js: 16.1
Deployment: Vercel
Runtime: Bun
Node compatibility: Bun runtime
14 Replies
NuitariOP
https://github.com/Thakisis/cache-components repository
When you say bun run time you'v added
bun --bun to your build script on both Vercel and locally? @Nuitariand if you have, have you tired just using Node? sometimes when I use the bun runtime(not just the package manager) I get a warning when I build about cache components not working properly with this runtime, sometimes it mentions setTimeout
I was looking at the code does using await with updateTag fix this?
im working on it
problem is im using Date object to check last render time
i was using "use cache" with the data and that was throwing me error i tried to create a cached date and it fixed the error but now evry single field is getting revalidated
I'll close it for now. Thanks, and sorry about my English!
@Patrick MacDonald np
NuitariOP
i have a new problem
plz make a new post with the problem