Currently, I am utilizing the useSWR hook to retrieve data from my api endpoints. It is my understanding that it uses the api routes as the key for caching the data.
The issue at hand is that I have implemented an api route on 2 separate pages (referred to as Page1 and Page2), each with distinct queries. When I visit Page1 first and then navigate to Page2, it displays the cached version of Page1, and vice versa.
I attempted to utilize the mutate function on both pages, but it only displays the cached version before revalidating. This is not the desired outcome. My goal is to display the correct data upon page mount.
Furthermore, I tried setting the revalidateOnMount flag to true in the SWRConfig options within the _app.js file like this:
...
<SWRConfig value={{ revalidateOnMount: true}}>
...
</SWRConfig>
...
Unfortunately, this approach did not work as expected.
It's worth noting that I am also receiving initialData from getStaticProps functions on both pages.
Any assistance or guidance would be greatly appreciated. I have been struggling with this issue for quite some time now.