Data Fetch on Each Request/Navigation using <Link> or router.push
Unanswered
sudo posted this in #help-forum
sudoOP
Hello,
NextJS 14 App Router
I have a client component that when clicked, will route to '/account' page using the
The behavior i noticed is the following:
1- When we click on the client-component, it takes us to /account, and fetches data.
2- When we do that again (within a short time frame), it takes us to /account again, but it does not induce a new data-fetch, in will show stale data.
3- It will only initiate a new data-fetch, 30-40 seconds after the first data-fetch. Why is that?
I also saw this pattern wile using Next's <Link> component.
How can we solve that? for it to initiate a new data-fetch on each navigation?
I found some workarounds (like doing
Is there a cleaner, more robust approach?
Thanks,
NextJS 14 App Router
I have a client component that when clicked, will route to '/account' page using the
router.push('/account'). Now this page, is a server component, and has data-fetching. The behavior i noticed is the following:
1- When we click on the client-component, it takes us to /account, and fetches data.
2- When we do that again (within a short time frame), it takes us to /account again, but it does not induce a new data-fetch, in will show stale data.
3- It will only initiate a new data-fetch, 30-40 seconds after the first data-fetch. Why is that?
I also saw this pattern wile using Next's <Link> component.
How can we solve that? for it to initiate a new data-fetch on each navigation?
I found some workarounds (like doing
router.push('/account'), then a router.refresh() to revalidate data) ( but i believe these could cause race conditions, and will sometimes data-fetch twice for each navigation) Is there a cleaner, more robust approach?
Thanks,
5 Replies
@sudo Hello,
NextJS 14 App Router
I have a client component that when clicked, will route to '/account' page using the `router.push('/account')`. Now this page, is a server component, and has data-fetching.
The behavior i noticed is the following:
1- When we click on the client-component, it takes us to /account, and fetches data.
2- When we do that again (within a short time frame), it takes us to /account again, but it does not induce a new data-fetch, in will show stale data.
3- It will only initiate a new data-fetch, 30-40 seconds after the first data-fetch. Why is that?
I also saw this pattern wile using Next's <Link> component.
How can we solve that? for it to initiate a new data-fetch on each navigation?
I found some workarounds (like doing `router.push('/account')`, then a `router.refresh()` to revalidate data) ( but i believe these could cause race conditions, and will sometimes data-fetch twice for each navigation)
Is there a cleaner, more robust approach?
Thanks,
The behaviour you are seeing is the nextjs router cache. [It is a feature, not a bug](https://joulev.dev/blogs/yes-nextjs-router-cache-is-actually-good).
To turn it off, use staleTimes:
To turn it off, use staleTimes:
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 0,
},
},
}
module.exports = nextConfig@joulev The behaviour you are seeing is the nextjs router cache. [It is a feature, not a bug](<https://joulev.dev/blogs/yes-nextjs-router-cache-is-actually-good>).
To turn it off, use staleTimes:
tsx
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 0,
},
},
}
module.exports = nextConfig
sudoOP
Hey, thanks for your answer.
I tried with this nextConfig configuration, and it is still not working :/
Data is still stale for around 30-40 seconds.
Again, the navigation method being used here is
I tried with this nextConfig configuration, and it is still not working :/
Data is still stale for around 30-40 seconds.
Again, the navigation method being used here is
router.push('/account') event handler from a client-component.maybe existing github issues exist for this
🤔