How to disable auto path revalidation
Answered
Atlantic mackerel posted this in #help-forum
Atlantic mackerelOP
I have dynamic routes to which users can navigate using next/link. They get revalidated every 30 seconds by default (fetchData will be called twice if I visit the same path again after 30seconds using next/link). But I want them to be cached permanently after the first page load (only get revalidated when the page is refreshed)
Can I disable the auto revalidation or change this 30 seconds to something longer?
export default async function Page({
params: { id },
}: {
params: { id: string };
}) {
const data = await fetchData(id);
return <div>{data}</div>;
}Can I disable the auto revalidation or change this 30 seconds to something longer?
Answered by joulev
And just want to check, you do not want the cache of different sessions (different tabs/browsers/devices) to affect each other?
In that case you are looking to customising the router cache duration which you can configure by
In that case you are looking to customising the router cache duration which you can configure by
staleTimes: https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes. Note that this configure the cache duration globally across all routes. It's impossible to configure this per-route at the moment./** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30, // configure this value
},
},
}
module.exports = nextConfig9 Replies
@Atlantic mackerel I have dynamic routes to which users can navigate using next/link. They get revalidated every 30 seconds by default (fetchData will be called twice if I visit the same path again after 30seconds using next/link). But I want them to be cached permanently after the first page load (only get revalidated when the page is refreshed)
js
export default async function Page({
params: { id },
}: {
params: { id: string };
}) {
const data = await fetchData(id);
return <div>{data}</div>;
}
Can I disable the auto revalidation or change this 30 seconds to something longer?
That 30 sec is the router cache which is not the cache you are looking for. In other words, with the current code, if you use two tabs to visit the page, the function is called twice despite the two visits falling within the 30 sec window.
To make the route static (which is what you are looking for), use https://nextjs.org/docs/app/api-reference/functions/generate-static-params and export const dynamicParams = false.
To make the route static (which is what you are looking for), use https://nextjs.org/docs/app/api-reference/functions/generate-static-params and export const dynamicParams = false.
@joulev That 30 sec is the router cache which is not the cache you are looking for. In other words, with the current code, if you use two tabs to visit the page, the function is called twice despite the two visits falling within the 30 sec window.
To make the route static (which is what you are looking for), use https://nextjs.org/docs/app/api-reference/functions/generate-static-params and export const dynamicParams = false.
Atlantic mackerelOP
I haven't tried that yet. But does that make
fetchData for each id param get called only once at build time and permanently cached in the server?Atlantic mackerelOP
If yes. that's not what I'm trying to do. I still want the route to be dynamic. But I want fetchData of each id param to be called only once when I first navigate to the route. It's something like this:
1. I navigate to /123
2.
3. I nagivate to /456
4.
5. I wait 60 sec and navigate to /123
6.
7. I refresh the page using F5
8.
all of this happens in the same tab. and all navigations is done using next/link.
1. I navigate to /123
2.
fetchData(123) is called and /123 is rendered to my view3. I nagivate to /456
4.
fetchData(456) is called and /456 is rendered to my view5. I wait 60 sec and navigate to /123
6.
fetchData(123) is 'not' called and /123 is rendered to my view7. I refresh the page using F5
8.
fetchData(123) is called and /123 is rendered to my viewall of this happens in the same tab. and all navigations is done using next/link.
But with my current code,
fetchData(123) in the step 6. is called@Atlantic mackerel If yes. that's not what I'm trying to do. I still want the route to be dynamic. But I want fetchData of each id param to be called only once when I first navigate to the route. It's something like this:
1. I navigate to /123
2.`fetchData(123)` is called and /123 is rendered to my view
3. I nagivate to /456
4. `fetchData(456)` is called and /456 is rendered to my view
5. I wait 60 sec and navigate to /123
6. `fetchData(123)` is 'not' called and /123 is rendered to my view
7. I refresh the page using F5
8. `fetchData(123)` is called and /123 is rendered to my view
all of this happens in the same tab. and all navigations is done using next/link.
And just want to check, you do not want the cache of different sessions (different tabs/browsers/devices) to affect each other?
In that case you are looking to customising the router cache duration which you can configure by
In that case you are looking to customising the router cache duration which you can configure by
staleTimes: https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes. Note that this configure the cache duration globally across all routes. It's impossible to configure this per-route at the moment./** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 30, // configure this value
},
},
}
module.exports = nextConfigAnswer