Opt out of next 14 Router Cache for some pages
Answered
Bee posted this in #help-forum
BeeOP
My team is working on a next 14 app that follows the App directory structure. In the app, we have a form in the directory structure src/app/(routes)/[lang]/projects/[projectId]/create, and a settings page, that displays the values undated inside the form. The settings page directory structure is src/app/(routes)/[lang]/projects/[projectId]/create. When the user updates the data and submits the form, we redirect the user to the settings page using next/navigation redirect method, and, All the API calls, to fetch data to render in the settings and the form page are inside server side pages.
The issue we are facing is if the user goes back and forth in the form and the settings page editing, and viewing the data, next caches the pages in the client side with Route Cache, so sometimes the pages are served from the client side ignoring the API calls, making the page data out of sync.
According to the documentation opting out of router cache is not possible, and we have to use router.refresh, revalidatePath, or revalidateTag. Using router.refresh doesn't seem like a good idea for this scenario. So we implemented a workaround, that is to pass a query parameter that is unique like Date.now(), each time we redirect the user between these two pages. This works perfectly, since the URL updates, next take each navigation as unique making the page re-render. But having an unnecessary parameter in the URL is kind of ugly. So I would like to confirm if there is a better solution to this, from a person who is more experience with next app routing pattern?
The issue we are facing is if the user goes back and forth in the form and the settings page editing, and viewing the data, next caches the pages in the client side with Route Cache, so sometimes the pages are served from the client side ignoring the API calls, making the page data out of sync.
According to the documentation opting out of router cache is not possible, and we have to use router.refresh, revalidatePath, or revalidateTag. Using router.refresh doesn't seem like a good idea for this scenario. So we implemented a workaround, that is to pass a query parameter that is unique like Date.now(), each time we redirect the user between these two pages. This works perfectly, since the URL updates, next take each navigation as unique making the page re-render. But having an unnecessary parameter in the URL is kind of ugly. So I would like to confirm if there is a better solution to this, from a person who is more experience with next app routing pattern?
Answered by joulev
if you want to opt out of the router cache, it's possible now https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes
7 Replies
BeeOP
Just wandering if my question is clear enough, or should I proviide more information
@Bee My team is working on a next 14 app that follows the App directory structure. In the app, we have a form in the directory structure src/app/(routes)/[lang]/projects/[projectId]/create, and a settings page, that displays the values undated inside the form. The settings page directory structure is src/app/(routes)/[lang]/projects/[projectId]/create. When the user updates the data and submits the form, we redirect the user to the settings page using next/navigation redirect method, and, All the API calls, to fetch data to render in the settings and the form page are inside server side pages.
The issue we are facing is if the user goes back and forth in the form and the settings page editing, and viewing the data, next caches the pages in the client side with Route Cache, so sometimes the pages are served from the client side ignoring the API calls, making the page data out of sync.
According to the documentation opting out of router cache is not possible, and we have to use router.refresh, revalidatePath, or revalidateTag. Using router.refresh doesn't seem like a good idea for this scenario. So we implemented a workaround, that is to pass a query parameter that is unique like Date.now(), each time we redirect the user between these two pages. This works perfectly, since the URL updates, next take each navigation as unique making the page re-render. But having an unnecessary parameter in the URL is kind of ugly. So I would like to confirm if there is a better solution to this, from a person who is more experience with next app routing pattern?
if you want to opt out of the router cache, it's possible now https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes
Answer
BeeOP
Thanks for the answer @joulev. though this seem like a it's still an experimental feature according to the docs.
@Bee Thanks for the answer <@484037068239142956>. though this seem like a it's still an experimental feature according to the docs.
yes it is. but that is the only way you can opt out of the router cache
BeeOP
@joulev , This is just an additional question, the staleTimes is set in the appwise settings using nextConfig. I wonder will there be a way to set for individual route in the future, without changing next default behavior for the entire app 🤔 ?
BeeOP
Got it thanks!