use cache and unstable_cache both have inconsistent behavior between refresh and client-side nav
Unanswered
German Shorthaired Pointer posted this in #help-forum
German Shorthaired PointerOP
Using cacheComponents: true with 'use cache' + cacheLife('max') + cacheTag.
Behavior (npm run build + npm start):
Hard refresh → prerendered static HTML, cache hit ✅
First <Link> navigation to same page → cache miss, fresh data fetched ❌
Subsequent <Link> navigations → served from cache ✅
The problem:
If I change a product's title after build, a hard refresh correctly serves the old cached title. But the first <Link> navigation fetches fresh data and shows the updated title — meaning it's still hitting the API/DB even though I never called revalidate. So it's not truly static — the cache isn't being used at all on first client navigation, only on subsequent ones. This causes a mismatch where hard refresh and client navigation show different content until the cache warms up.
With unstable_cache it's the opposite problem:
After revalidating and hard refreshing the product page I correctly see the new title, but if I client-side navigate to the product page from another page (without a hard refresh on the product page first) I see the stale title.
So both APIs have an inconsistency, just in opposite directions. Is this a known limitation of 'use cache' or am I missing something in my setup? What's the recommended approach to get consistent behavior between hard refresh and client-side navigation?
Behavior (npm run build + npm start):
Hard refresh → prerendered static HTML, cache hit ✅
First <Link> navigation to same page → cache miss, fresh data fetched ❌
Subsequent <Link> navigations → served from cache ✅
The problem:
If I change a product's title after build, a hard refresh correctly serves the old cached title. But the first <Link> navigation fetches fresh data and shows the updated title — meaning it's still hitting the API/DB even though I never called revalidate. So it's not truly static — the cache isn't being used at all on first client navigation, only on subsequent ones. This causes a mismatch where hard refresh and client navigation show different content until the cache warms up.
With unstable_cache it's the opposite problem:
After revalidating and hard refreshing the product page I correctly see the new title, but if I client-side navigate to the product page from another page (without a hard refresh on the product page first) I see the stale title.
So both APIs have an inconsistency, just in opposite directions. Is this a known limitation of 'use cache' or am I missing something in my setup? What's the recommended approach to get consistent behavior between hard refresh and client-side navigation?
13 Replies
@German Shorthaired Pointer solved?
German Shorthaired PointerOP
No not really tbh, I went with use cache but the ”bug” persists: first client navigation to page creates a cache of that page that’s seems to be separate from the server/build cache.
@Nuitari are you using revalidateTag or updateTag?
German Shorthaired PointerOP
revalidateTag but the issue occurs even before that, as I explained with the example:
Behavior (npm run build + npm start):
Hard refresh on the page → prerendered static HTML, cache hit ✅
First <Link> navigation to same page → cache miss, fresh data fetched ❌
Subsequent <Link> navigations → served from cache ✅
Behavior (npm run build + npm start):
Hard refresh on the page → prerendered static HTML, cache hit ✅
First <Link> navigation to same page → cache miss, fresh data fetched ❌
Subsequent <Link> navigations → served from cache ✅
i create a wrapper component to see update cache components and their last render i advice you to create something like that for easy debug. because i also have problems with updates
sorry had to go il send you repo if you wanna look it
German Shorthaired PointerOP
yes please do @Nuitari
you have it on dm and i can explain you what you need about the code
https://cache-components-nine.vercel.app/ have a first cache on the parallel route data come as prop to client form you can close sidebar and open and full data is fresh all the time
data in the cards is cached by id and field name you change one and it refresh but as you see in vercel all data of one product get updated in local only the field mutate. you can check last render in tooltip