OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Opt out of next 14 Router Cache for some pages

  • Thread starter Thread starter Charith Hettiarachchi
  • Start date Start date
C

Charith Hettiarachchi

Guest
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?

<p>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 <code>src/app/(routes)/[lang]/projects/[projectId]/create</code>, and a settings page, that displays the values undated inside the form. The settings page directory structure is <code>src/app/(routes)/[lang]/projects/[projectId]/create</code>. 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.</p>
<p>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.</p>
<p>According to the <a href="https://nextjs.org/docs/app/building-your-application/caching#router-cache" rel="nofollow noreferrer">documentation</a> 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?</p>
 
Top