Architecture

- App Router
- Multiple Suspense boundaries inside a product card
- Each section is a cached component with its own cacheTag

Example:

- ProductDescription → cacheTag("description-id")
- ProductPrice → cacheTag("price-id")
- ProductMetadata → cacheTag("metadata-id")

Each component is rendered inside its own Suspense boundary.

Cached component example

export async function ProductDescription({ id }: { id: number }) {
  "use cache";
  cacheTag(`description-${id}`);

  const productData = await getProduct(id);

  if (!productData) return null;

  return <p>{productData.description}</p>;
}

Other cached components also call the same function:

const productData = await getProduct(id)

but use different cacheTags.

Observed behavior

Local (dev + local production build)

- Invalidating a specific tag using updateTag
- Only the related cached component re-renders
- Other components remain cached as expected

Vercel deployment

- If multiple cached components call the same data function / promise
- Invalidating one tag appears to cause all components using that function to refresh

So effectively the cache invalidation behaves as if the components share a dependency through the same async function.

Question

Is there any difference in how Cache Components + tag invalidation interact with the Vercel Data Cache compared to local builds?

Or could the shared async function / promise deduplication cause the cache dependency to be shared in production?

Environment

Next.js: 16.1
Deployment: Vercel
Runtime: Bun

local

vercel

sometimes in local build i also get full revalidation, to detect rerender i move update date to ddbb and compare it with a margin of few seconds. Also my cliente form doesnt forget previous dirty fields still need to work on it but i appreciate if someone can confirm wich is the intended behaviour