Next.js Discord

Discord Forum

How can I configure app router to never show stale data?

Answered
Ratonero Mallorquin posted this in #help-forum
Open in Discord
Ratonero MallorquinOP
In NextJS pages router, you could use fallback: blocking to make sure the user have to wait until fresh content is available, instead of serving stale content.

How can I do this with the app router?

This is important in those cases where it's more important to never display old/out of date content, rather than having a fast response time.
Answered by Ray
I think what fallback: blocking does it to pre-render the page when it is being visited and it isn't pre-render at build time
use export const dynamicParams = true (true by default) with generateStaticParams in app router to get the same behaviour
View full answer

38 Replies

@Ratonero Mallorquin In NextJS pages router, you could use `fallback: blocking` to make sure the user have to wait until fresh content is available, instead of serving stale content. How can I do this with the app router? This is important in those cases where it's more important to never display old/out of date content, rather than having a fast response time.
Ray
I think what fallback: blocking does it to pre-render the page when it is being visited and it isn't pre-render at build time
use export const dynamicParams = true (true by default) with generateStaticParams in app router to get the same behaviour
Answer
Ray
you should make the page dynamic if you want the page never show stale data
Ratonero MallorquinOP
👍
Ratonero MallorquinOP
@Ray I'm unsure now though, doesn't marking a page as dynamic make sure it's rebuilt on every request?

So in other words it can never be cached?
@Ray yes
Ratonero MallorquinOP
We still want to cache pages. Just not serve a week old cached page.
Ray
unless you are using data cache, otherwise dynamic page should always fetch the data on each request
Ratonero MallorquinOP
Dynamic will introduce a worse problem so to say
@Ratonero Mallorquin We still want to cache pages. Just not serve a week old cached page.
Ray
then use export const revalidate = 300 // 5min`
Ratonero MallorquinOP
Why? Doesnt that still serve a stale page after those 5 minutes?
Ray
isnt it what you want?
Ratonero MallorquinOP
No, we never want to serve stale content
Ratonero MallorquinOP
Yes, cache
Ray
so?
Im confused
Ratonero MallorquinOP
Stale content and cached content are not the same thing
I'll give example
Let's say we use revalidate set to 5 minutes. Page is now cached. GREAT!

Page is visited first time. It is generated. User waits, gets fresh content. Good.

Next visit is after 3 minutes.
User gets cached content. Still fresh. Good.

Next visit is after 1 week.
User gets served EXTREMELY old content. BAD.


See the problem?
Ratonero MallorquinOP
No, because that will generate the page on every request and it will NOT be cached, and the performance will be worse
Ray
and implement the caching on your own
Ratonero MallorquinOP
Huh, like in a middleware or something?
Ray
the build-in one isn't what you looking for because it uses stale-while-revalidate approach
Ratonero MallorquinOP
Nextjs cannot serve up to date content with fast cache out of the box?
I wasn't aware.
@Ratonero Mallorquin Huh, like in a middleware or something?
Ray
no something like this
export async function getData() {
  const cacheKey = ''
  const cachedData = cache.find(cacheKey, { ttl: 300 })
  if (cachedData) return cachedData

  const data = await db.query()
  cache.put(cacheKey, data, { ttl: 300 })

  return data
}
Ratonero MallorquinOP
This was a super important realization, thank you!
@Ratonero Mallorquin Nextjs cannot serve up to date content with fast cache out of the box? I wasn't aware.
Ray
the build-in one will only invalidate on next visist so it will show stale data
Ratonero MallorquinOP
It's weird since it was possible with the pages router, with fallback: blocking, which would let the user wait until content was built on those cases where the cache had become stale.
Seems like a step back with the app router in comparison.
Is the getData function above a specific one, as in the name has special meaning? Or just an example name?
it won't re-generated a generated page
Ratonero MallorquinOP
You're right, thanks.

I wonder, is our use case very exotic/unusual?
To have cached pages to have good page performance, but at the same time never serve the user stale content?

For our clients it seems like the most reasonable approach, but it seems very far off from the philosophy of NextJS.. strange 🙂
Ratonero MallorquinOP
We use ISR btw, in our old pages router projects (think a CMS serving thousands of pages), so in that case I actually think fallback blocking does what we want.

I'll check out cachified.