Dynamic cache
Unanswered
Almond stone wasp posted this in #help-forum
Almond stone waspOP
Hello, this may be really silly question but I'm new.
I'm fetching some data in the app (no problem so far) but I want to cache it. I checked documentation and see this:
My requests not cached because I use cookies in route api I guess.
my question, is there a way to cache dynamic data with some revalidation option.
For example I have a dynamic list (each user own different dynamic data) which updated only once a day, even though this is dynamic I want to fetch it only once a day.
I'm fetching some data in the app (no problem so far) but I want to cache it. I checked documentation and see this:
Requests are not cached if:
Dynamic methods (next/headers, export const POST, or similar) are used and the fetch is a POST request (or uses Authorization or cookie headers)My requests not cached because I use cookies in route api I guess.
my question, is there a way to cache dynamic data with some revalidation option.
For example I have a dynamic list (each user own different dynamic data) which updated only once a day, even though this is dynamic I want to fetch it only once a day.
17 Replies
Sun bear
check out for revalidate prop in getStaticProps, also, nextjs support on-demand revalidate too
Almond stone waspOP
is getStaticProps available on 13.4 app dir ?
Sun bear
no it's only available in pages dir, but I saw app dir fetch have 'revalidate' too. Did you try it?
Almond stone waspOP
yes I tried, but because I use cookies inside the route api its not cached
Sun bear
Since i'm not familiar with app dir that much, I have searched on stackoverflow and got this:
https://stackoverflow.com/questions/75572580/next-js-13-dynamic-rendering-instead-of-static-rendering-when-using-headers-in-f
https://stackoverflow.com/questions/75572580/next-js-13-dynamic-rendering-instead-of-static-rendering-when-using-headers-in-f
It's saying that you can force this behavior by passing "cache: "force-cache"" into your fetch request. Like this image:
Almond stone waspOP
this seems works, but now when I try to add revalidation with either
it doesn't work, it always use cached from disk
export const revalidate = 5
//or passing params to fetch
next: { revalidate: 5 } it doesn't work, it always use cached from disk
how can I revalidate this call when needed
Almond stone waspOP
using only
next: { revalidate: 5 } option doesn't have any affect at all, and when i use "force-cache", then its impossible to revalidate :/Sun bear
Can you try this, but modify the value so it can cache:
https://stackoverflow.com/questions/72392603/how-to-avoid-caching-for-specific-nextjs-api-route
https://stackoverflow.com/questions/72392603/how-to-avoid-caching-for-specific-nextjs-api-route
Almond stone waspOP
still same
Sun bear
guess I can't help anymore. Try ask some AI model like gpt or Bard
Almond stone waspOP
Okay, thanks
Sun bear
I look for this problem a little more and found this:
https://nextjs.org/docs/pages/api-reference/next-config-js/headers#cache-control
https://nextjs.org/docs/pages/api-reference/next-config-js/headers#cache-control
you can try
res.setHeader('Cache-Control', ' max-age=60, must-revalidate')
res.setHeader('Cache-Control', ' max-age=60, must-revalidate')
Here is the list of value for 'cache-control'. I hope this help