SPA state in Zustand store being preserved across page navigation?
I have a form which gives users the ability to submit payments via either credit card or PayPal. When a user selects PayPal, the form is toggled into a loading state with overlay, and the user is redirected to a PayPal sandbox URL. To my understanding, this should mean the app unloads and all state would be reset fresh with another load.
However, I'm observing that when using Incognito mode (not sure why it's only consistent that way), hitting the "back" button from that PayPal location will bring the user back to the form, with state still preserved. The overlay is active, all form data is saved, etc. Do browsers preserve such state for recent pages? Is there a way I can consistently ensure this doesn't happen? If a user hits "back" I'd ideally like to simply trigger a location.reload() for simplicity.
2 Replies
Looks like I've got some reading to do on BFCache, probably https://web.dev/bfcache/
I think I've got a solution for this in mind, but gonna check behind to make sure I implement it correctly.
web.dev
Back/forward cache
Learn how to optimize your pages for instant loads when using the browser's back and forward buttons.
Can confirm this was the issue. You can listen for the pageshow event and check if event.persisted is true, and respond accordingly. Thank you guys as always, sorry for posting this and immediately closing it.