Next.js Discord

Discord Forum

Caching Help

Answered
Golden-crowned Warbler posted this in #help-forum
Open in Discord
Golden-crowned WarblerOP
Hey everyone! I am loading data from my API into my next.js 14 app and I am trying to figure out the caching. Right now, if I visit the site it shows stale data. If I refresh the site then it gets the correct data from the API. Why does the data not refresh when I visit the site? I have DNS level caching turned off, is there something else that could be causing this caching? I have the next.js fetch functions to revalidate after 10 seconds. Appreciate any help!

My site: https://beta.mattglei.ch
Code: https://github.com/gleich/website
Answered by B33fb0n3
it revalidates only after the next visit. So if you have a page with revalidation of every 10 seconds:
1. Visit in the 10 seconds: new version of page
2. Visit in the 10 seconds: cached version
3. Visit after 6 hours: old version (stale-while-revalidate) & in background the creation of new page
4. Visit: new version of page
View full answer

28 Replies

Golden-crowned WarblerOP
This happens hours after the data changed and should've been revalidated. Yeah if the data changes and I visit it before the revalidate has been performed it shouldn't show the new data, the problem is that I have it revalidate every 10 seconds and it didn't update for hours.
@Golden-crowned Warbler This happens hours after the data changed and should've been revalidated. Yeah if the data changes and I visit it before the revalidate has been performed it shouldn't show the new data, the problem is that I have it revalidate every 10 seconds and it didn't update for hours.
B33fb0n3
it revalidates only after the next visit. So if you have a page with revalidation of every 10 seconds:
1. Visit in the 10 seconds: new version of page
2. Visit in the 10 seconds: cached version
3. Visit after 6 hours: old version (stale-while-revalidate) & in background the creation of new page
4. Visit: new version of page
Answer
Golden-crowned WarblerOP
hmmm ok, is there some way to have the cache not be dependent on a visit and just update every 30 seconds?
or is that just the nature of the next.js cache
@Golden-crowned Warbler or is that just the nature of the next.js cache
B33fb0n3
That's a basic cache behavior. The only way that I know is to either use clientside fetching (not recommended) or use a dynamic page (recommended) to have instant updates
Golden-crowned WarblerOP
ok, I got ya. So to make it dynamic I just turn the cache off? Just add cache: "no-store" to my fetch request?
@Golden-crowned Warbler ok, I got ya. So to make it dynamic I just turn the cache off? Just add `cache: "no-store"` to my fetch request?
B33fb0n3
yea. Or add noStore() on the top. Or make your page itself dynamic via export const dynamic = "force-dynamic"
Golden-crowned WarblerOP
ok, sounds good. bummer that I can't have it update in the background periodically and have to make the request every time someone visits the site which slows it down. appreciate the help!
B33fb0n3
@Golden-crowned Warbler solved?
Golden-crowned WarblerOP
I think so... I actually ended up going with on-demand-rendering which I think should've resolved my issues. What it does now is whenever data from my API changes my API sends a request to my application to revalidate the content. My understanding is that it should still be using the cache.
Golden-crowned WarblerOP
Last quick question I got here, when I use on-demand-revalidation does it revalidate and cache the pages at the time that the revalidation is triggered or when the next person visits the site? The docs mention the cache getting purged when I call revalidateTag(...) I just don't know if it actually gets revalidated and cached.
Black carp
another option is to leverage the cache tags to invalidate the data cache. @B33fb0n3 is correct that the cache in Next is currently stale-while-revalidate. What I ended up doing to solve this is attaching a tag to that data cache, and then using a cron-job to ping a secure API endpoint to bust the cache every X min. Another solution I worked up was caching a date on when to do this exact cache-bust manually with the tag... either way... not fun 😄
Golden-crowned WarblerOP
thanks for the suggestion @Black carp! Yeah I was going to do a cron job and then I realized that I can just have my data source trigger the revalidation of the cache. Does your solution simple purge the cache or does it actually refresh the data?
From what it seems like my solution only purges the cache and it needs to actually get filled with data once a user visits the site.
Black carp
the solution just busts the cache so that any user's next request will get brand new data, current user or new. It is unable with the cron job to replace the existing user's data as it can't call that user's revalidatePath. However the second "idea" with the wrapper around cache to hold a timestamp to then trigger the tag cache DOES/CAN do that so the request in flight will have the latest and never stale.
I ran into this issue with an app token I had to recycle every 10 minutes... so it was fun.
Black carp
It’s to short circuit that behavior. Basically busting the tag makes sure the next time that data fetch happens it doesn’t use the cache. You can interval it with a cron job, or you could introduce a middleware (not next middleware) so it busts the tag per call
Black carp
Yup! You have definitely been 100% accurate
B33fb0n3
@Golden-crowned Warbler solved?
Golden-crowned WarblerOP
I believe so, thank you!
@Golden-crowned Warbler I believe so, thank you!
B33fb0n3
Sure thing. Please mark solution
Original message was deleted
joulev
that's not the answer
Golden-crowned WarblerOP
sorry about that, I thought I should mark the solution that I ended up going with