I'm lost with caching
Unanswered
Bicknell's Thrush posted this in #help-forum
Bicknell's ThrushOP
Hi there,
So, with all the posibilities when it comes to caching, I am pretty lost.
Here's what I would like to achieve:
1. Upon build, I would like to create some form of static cache for my pages.
2. Upon runtime, I would like to have this cache expire after 60 seconds.
3. When a page gets hit, it should invalidate the cache, serve the cache and refetch in the background. Then, the cache gets valid again for 60 seconds.
Cached pages could become 404 (in this case, a blog post could be removed).
Which functions etc should I use?
So, with all the posibilities when it comes to caching, I am pretty lost.
Here's what I would like to achieve:
1. Upon build, I would like to create some form of static cache for my pages.
2. Upon runtime, I would like to have this cache expire after 60 seconds.
3. When a page gets hit, it should invalidate the cache, serve the cache and refetch in the background. Then, the cache gets valid again for 60 seconds.
Cached pages could become 404 (in this case, a blog post could be removed).
Which functions etc should I use?
14 Replies
@Bicknell's Thrush Hi there,
So, with all the posibilities when it comes to caching, I am pretty lost.
Here's what I would like to achieve:
1. Upon build, I would like to create some form of static cache for my pages.
2. Upon runtime, I would like to have this cache expire after 60 seconds.
3. When a page gets hit, it should invalidate the cache, serve the cache and refetch in the background. Then, the cache gets valid again for 60 seconds.
Cached pages could become 404 (in this case, a blog post could be removed).
Which functions etc should I use?
sounds like all you need is
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
export const revalidate = 60https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
Turkish Van
i would like to add, also make sure that stuff You want to be cached, really is cached
@Turkish Van i would like to add, also make sure that stuff You want to be cached, really is cached
Bicknell's ThrushOP
What do you mean?
@joulev sounds like all you need is `export const revalidate = 60`
<https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate>
Bicknell's ThrushOP
And
generateStaticParams?@Bicknell's Thrush What do you mean?
Turkish Van
Sometimes You might assume some part of data fetch is being cached, but it's not.
Make sure You are not opting out of data caching unknowingly or by mistake:
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching
Make sure You are not opting out of data caching unknowingly or by mistake:
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching
Bicknell's ThrushOP
Is there any way to validate if its being cached properly?
When I run build, it shows my route as
ƒ (Dynamic) server-rendered on demand
ƒ (Dynamic) server-rendered on demand
├ ƒ /blog/[slug] ideally, I would like the build to cache the blog page as well.
However, for 60 seconds, then revalidate
Bicknell's ThrushOP
Aha, with the staticParams I get some results now
Cache-Control header; s-maxage=60, stale-while-revalidate
@Bicknell's Thrush When I run build, it shows my route as
ƒ (Dynamic) server-rendered on demand
Turkish Van
You might want to use
Then, You can revalidate your data fetches by adding
generateStaticParams just as You mentioned above.Then, You can revalidate your data fetches by adding
export const revalidate = 60 to Your dynamic route.Bicknell's ThrushOP
This is perhaps something I want, let me tweak with it