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.