Browser back button shows stale data
Unanswered
Poodle posted this in #help-forum
PoodleOP
Hi! I'm having an issue with data consistency when using the browser's back button in my Next.js app.
The scenario:
1. I have a dashboard page showing a list of items
2. I duplicate an item (now I have 2 items)
3. I click on the first item to edit it
4. When I use the browser's back button to return to the dashboard, I only see the first item (the data seems cached)
5. However, if I use my app's custom back button (which uses Next.js Link with prefetch={false}), I see both items correctly
I've tried adding export const dynamic = 'force-dynamic' on dashboard page but the browser's back button still shows stale data.
Any suggestions on how to ensure fresh data when using the browser's back button?
The scenario:
1. I have a dashboard page showing a list of items
2. I duplicate an item (now I have 2 items)
3. I click on the first item to edit it
4. When I use the browser's back button to return to the dashboard, I only see the first item (the data seems cached)
5. However, if I use my app's custom back button (which uses Next.js Link with prefetch={false}), I see both items correctly
I've tried adding export const dynamic = 'force-dynamic' on dashboard page but the browser's back button still shows stale data.
Any suggestions on how to ensure fresh data when using the browser's back button?
3 Replies
Silver Fox
Since the data reloads when navigating using Next.js but not through the browser, this isn't a problem with Next.js's client-side router but the browser's back/forward cache. web.dev has a [great guide](https://web.dev/articles/bfcache#update-data-after-restore) on how to refresh data in the bfcache—because you're using React, you would also write such code in a
useEffect with the appropriate cleanup function.PoodleOP
Hmm but I fetch the data in server page and then set the client component state based on this initial data. Should I remove this fetch altogether from the server page? Or should I keep it and have same request in two places, initially server and then useEffect as well? (seems inconvenient)
Dutch Smoushond
i think this will be solved if you just fetch and mutate on client