Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

thetanaz's avatar

History events don't fetch fresh data by default, why is there no option for this behavior?

So I'm making a website similar to ebay in the sense that people can purchase second-hand stuff and post listings themselves. What I've noticed is, let's say a user is browsing the electronics section and they see some listings they like, they favorite the listings with the favorite button and then they click away, and decide to go back to electronics with the browser's back button, the change in favorite state of all listings they've interracted with reverts back to their original state before the user interraction took place. Same thing when the user visits their favorites page and they remove a listing from favorites - it gets reflected immediately in the page and in the database but if they navigate to somewhere else and then navigate back there is no request to the backend, and instead the old cached props are being used.

I've mitigated the issue using a custom hook that listens to the pop state and reloads the "listings" prop :

import { useEffect } from "react";
import { router } from "@inertiajs/react";

export function useForceReloadOnNavigation() {
    useEffect(() => {
        const handlePopState = () => {
            router.reload({ only: ["listings"], replace: true });
        };

        window.addEventListener("popstate", handlePopState);

        return () => {
            window.removeEventListener("popstate", handlePopState);
        };
    }, []);
}

But my question is - why isn't there a more elegant way of solving this? Like a no-cache function or something of that nature. This can cause huge desynchronization between the server and client states, and cause confusion upon users of the web app.

0 likes
2 replies
gych's avatar

Try to add this at the top in your app.js file

import { router } from '@inertiajs/vue3'

let stale = false;
window.addEventListener('popstate', () => stale = true);
router.on('navigate', (event) => {
    if (stale) router.get(event.detail.page.url, {}, { replace: true, preserveState: false });
    stale = false;
});
thetanaz's avatar

@gych That's vue, I'm using react, but I get the idea. However in some cases where data isn't updated often the caching behavior is actually preferred, I just wish there were a way to toggle it on/off on individual page basis rather than having to import custom hooks everywhere.

Please or to participate in this conversation.