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

40 messages · Page 1 of 1 (latest)

winged pulsar
#

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.

sharp latchBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

leaden anvil
#

you should make the page dynamic if you want the page never show stale data

winged pulsar
#

👍

sharp latchBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1227992626238722110 message)

winged pulsar
#

@leaden anvil 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?

leaden anvil
winged pulsar
leaden anvil
#

unless you are using data cache, otherwise dynamic page should always fetch the data on each request

winged pulsar
#

Dynamic will introduce a worse problem so to say

leaden anvil
winged pulsar
#

Why? Doesnt that still serve a stale page after those 5 minutes?

leaden anvil
#

isnt it what you want?

winged pulsar
#

No, we never want to serve stale content

leaden anvil
winged pulsar
#

Yes, cache

leaden anvil
#

so?

#

Im confused

winged pulsar
#

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?

leaden anvil
winged pulsar
#

No, because that will generate the page on every request and it will NOT be cached, and the performance will be worse

leaden anvil
#

and implement the caching on your own

winged pulsar
#

Huh, like in a middleware or something?

leaden anvil
#

the build-in one isn't what you looking for because it uses stale-while-revalidate approach

winged pulsar
#

Nextjs cannot serve up to date content with fast cache out of the box?
I wasn't aware.

leaden anvil
# winged pulsar Huh, like in a middleware or something?

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
}
winged pulsar
#

This was a super important realization, thank you!

leaden anvil
winged pulsar
#

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?

leaden anvil
leaden anvil
#

it won't re-generated a generated page

winged pulsar
#

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 🙂

leaden anvil