Next.js Discord

Discord Forum

Caching a dynamic route for 1 hour

Answered
Porcelaine posted this in #help-forum
Open in Discord
PorcelaineOP
Hey folks, using Next.js 14 with the App Router, and getting a bit lost in all the caching documentation (it feels kinda overcomplicated, if I'm honest).

For a particular dynamic route, I just want to say "don't rerender this page for 1 hour after it was last rendered" - is there a way to express that? Additionally, I would want to set the Cache-Control max-age to match that.

Thanks
Answered by B33fb0n3
you can add export const dynamic = 'force-static' with export const revalidate = 3600 // one hour to it. Then the page will be rendered dynamically and after one hour there will be a new version created on the next request
View full answer

27 Replies

PorcelaineOP
For what it's worth, in this case, I am implementing the GET handler manually (since it's rendering an RSS feed), so I could cache the rendered page myself in memory and set the Cache-Control header myself, but it feels like surely Next.js has a way to do this?
@Porcelaine For what it's worth, in this case, I am implementing the `GET` handler manually (since it's rendering an RSS feed), so I _could_ cache the rendered page myself in memory and set the Cache-Control header myself, but it feels like surely Next.js has a way to do this?
B33fb0n3
you can add export const dynamic = 'force-static' with export const revalidate = 3600 // one hour to it. Then the page will be rendered dynamically and after one hour there will be a new version created on the next request
Answer
@B33fb0n3 you can add export const dynamic = 'force-static' with export const revalidate = 3600 // one hour to it. Then the page will be rendered dynamically and after one hour there will be a new version created on the next request
PorcelaineOP
thanks! I think the thing I was missing was dynamic = 'force-static' - however, I'm now realising this perhaps only works with page.ts, and not with route.ts?
actually no, these same options are listed in the documentation for route handlers
hmmm, in which case, it's not working - I'm making requests to the page which includes the current date+time, and I'm seeing the time increase with every request
this is my entire route.ts:

import generateFeed from './generateFeed'

export const dynamic = 'force-static'
export const revalidate = 3600

export async function GET() {
  const feed = await generateFeed()

  return new Response(feed.rss2(), {
    headers: {
      'Content-Type': 'application/rss+xml; charset=utf-8',
    },
  });
}
I'm running it with next dev - does this behave different with the local dev build?
B33fb0n3
yea the dev env is different from production when it comes to caching as well. So try it in production @Porcelaine
PorcelaineOP
ah, just checked the production build and it works great - thank you @B33fb0n3

isn't force-static a bit misleading? it's not like it's actually a static page
@B33fb0n3 you can add export const dynamic = 'force-static' with export const revalidate = 3600 // one hour to it. Then the page will be rendered dynamically and after one hour there will be a new version created on the next request
West African Crocodile
Interesting, I have revalidate in the fetch call. But using force static. It directly caches the entire route instead right?
@B33fb0n3 yea, it should return only the result of the route
West African Crocodile
How would u fetch an external api call(apple podcasts). Server side or client side?
I have it client side with revalidate but im thinking to move it to server side to cache the whole route
Even If i have revalidate in the fetch call ( client side).. It will still be dynamic right? Since it's the client who will fetch a (cached) request from the backend
So we have no way to have ssr if the client is the one who fetch the data (it doesn't matter if the fetch is cached or not)
B33fb0n3
When it comes to clientside fetching I would use a client fetching library like rq or swr
btw im searching it but no luck, isnt there a way to have a static page, but with auth?
@West African Crocodile btw im searching it but no luck, isnt there a way to have a static page, but with auth?
B33fb0n3
"static" (for everone equal) and "with auth" (personalized page) does not sound right...
@B33fb0n3 "static" (for everone equal) and "with auth" (personalized page) does not sound right...
West African Crocodile
Ok I understand, static is fully static. No problem for Auth

But now I have an issue.
Imagine if you have a blog with 15 food recipes.
Is there any way to have the old ISR/get StaticProps?
So it will be static til new recipes are added?
@B33fb0n3 idk about the pages router. You might want to open an own thread in <#1007476603422527558> to get help
West African Crocodile
Im using app router. I want trpc to fetch recipes. And then make the route static.
Not sur if that's possible
West African Crocodile
Nvm

Trpc has docs about how to stale while revalidate
@Bombay-duck it doesnt work with dynamic routes and metadata
B33fb0n3
you might want to open your own thread that describes your current situation and your specific issue, so we can help you better. This thread is already answered