can't cache fetch request in dynamic route
Unanswered
Istrian Coarse-haired Hound posted this in #help-forum
Istrian Coarse-haired HoundOP
I have a dynamic route like this: /videos?page=1
Inside this page, i call a fetch request to get the data for that page. Since the data is not updated frequently, once a week, i dont want to constantly hit the db for every request. However, when i debug with fetches:{fullUrl} on, i dont see it caches the result. If this is the first time i am on this route, it will show: "cache skip, cache missed reason: {cache-control: no cache (hard refresh)}".
For subsequent request on that dynamic route, i just get: "GET /videos?page=number&_rsc=... 200 " with no information about cache hitting or missing.
The fetch is called in server component.
Thanks.
Inside this page, i call a fetch request to get the data for that page. Since the data is not updated frequently, once a week, i dont want to constantly hit the db for every request. However, when i debug with fetches:{fullUrl} on, i dont see it caches the result. If this is the first time i am on this route, it will show: "cache skip, cache missed reason: {cache-control: no cache (hard refresh)}".
For subsequent request on that dynamic route, i just get: "GET /videos?page=number&_rsc=... 200 " with no information about cache hitting or missing.
The fetch is called in server component.
Thanks.
37 Replies
Istrian Coarse-haired HoundOP
14
14.0.4
@Istrian Coarse-haired Hound 14.0.4
Are you setting the fetch cache to
force-cache?using the
fetch API in a dynamic route won't cache itthe requests are deduped by default but not cached during dynamic rendering
@Plague Are you setting the fetch cache to `force-cache`?
Istrian Coarse-haired HoundOP
I did this
@Plague using the `fetch` API in a dynamic route won't cache it
Istrian Coarse-haired HoundOP
So it doesnt matter if i set it or not, right?
@Istrian Coarse-haired Hound So it doesnt matter if i set it or not, right?
Depends on how you're using the fetch, are you passing the search params to the fetch?
@Plague Depends on how you're using the fetch, are you passing the search params to the fetch?
Istrian Coarse-haired HoundOP
Yes, i did. I get the params using the prop searchParams passed to the page.tsx. In the fetch request, i also set some dynamic properties of the headers
Yeah so usually a unique cache for each search params would be created, however I think because you are setting dynamic headers it will never be cached.
can share the actual
fetch call so I can see myself?Istrian Coarse-haired HoundOP
Initially, i used unstable_cache. Since i didnt see it cache the request, i switched to fetch
Yeah
You were using
unstable_cache nor fetch is going to be able to consistently get the result you're looking for, there are alot of possibly changing values here so as I stated before a cache is being created for each value, but I think do to the headers it won't actually ever be cachedYou were using
unstable_cache with the @supabase/supabase-js package orm?Istrian Coarse-haired HoundOP
yes
so i will try to remove the header to check if it caches or not
I doubt it,
unstable_cache with the supabase orm is the ideal route IMO, and if that didn't cache the result then there are just too many dynamic options.unstable_cache is a very durable and persistent cache so if you were not getting the result you were looking for with that, fetch API with the automatic dedupe or using Reach.cache with the supabase orm to dedupe might be your best optionIstrian Coarse-haired HoundOP
GET /videos?_rsc=11693 200 in 162ms
GET /videos?page=2 200 in 296ms
│ GET domain/videos?select=*&order=uploaded_date.desc&limit=12&offset=12 401 in 193ms (cache: SKIP) │ │ Cache missed reason: (cache-control: no-cache (hard refresh))
GET /videos?page=2 200 in 296ms
│ GET domain/videos?select=*&order=uploaded_date.desc&limit=12&offset=12 401 in 193ms (cache: SKIP) │ │ Cache missed reason: (cache-control: no-cache (hard refresh))
i still use fetch for this time but it still doesnt cache
so i just want to confirm: the reason the fetch doesnt cache the result is because i am using dynamic route, right?
Yes, try setting a
revalidate number instead of using the cache optionset the number to whatever you want, but, you said you data changes weekly right? So set it to a week in seconds or around there.
Istrian Coarse-haired HoundOP
you mean: {next: {revalidate: 100}} in fetch right?
Yeah
Istrian Coarse-haired HoundOP
GET /videos?page=1 200 in 348ms
│ GET /videos?select=&order=uploaded_date.desc&limit=12&offset=0 401 in 236ms (cache: SKIP)
│ │ Cache missed reason: (cache-control: no-cache (hard refresh))
GET /videos?page=2 200 in 161ms
│ GET /videos?select=&order=uploaded_date.desc&limit=12&offset=12 401 in 78ms (cache: SKIP)
│ │ Cache missed reason: (cache-control: no-cache (hard refresh))
│ GET /videos?select=&order=uploaded_date.desc&limit=12&offset=0 401 in 236ms (cache: SKIP)
│ │ Cache missed reason: (cache-control: no-cache (hard refresh))
GET /videos?page=2 200 in 161ms
│ GET /videos?select=&order=uploaded_date.desc&limit=12&offset=12 401 in 78ms (cache: SKIP)
│ │ Cache missed reason: (cache-control: no-cache (hard refresh))
still the same
Yeah, the fetch is just too dynamic to be cached
Istrian Coarse-haired HoundOP
ok, i got it
Thank you so much
you help me clarify many things about caching
Istrian Coarse-haired HoundOP
oh i just figured it out
The reason is not cached is because of the header
remove it then it caches
the solution is just to make 2 separate requests to get the count
weird