stop caching in client
Answered
English Angora posted this in #help-forum
English AngoraOP
I have a page that fetches a users tracked foods that they like and renders the list on the page. Each food list item redirects a user to another page. when the user removes a item from the list, then redirects to the a food page and comes back to the list page there list is stale with the old data. So if someone removed hamburger, it will still show up on the list. Is there an api I can use to invalidate the page when the link is clicked. Right now the best solution I can think of is to fetch the list on the client
19 Replies
@English Angora I have a page that fetches a users tracked foods that they like and renders the list on the page. Each food list item redirects a user to another page. when the user removes a item from the list, then redirects to the a food page and comes back to the list page there list is stale with the old data. So if someone removed hamburger, it will still show up on the list. Is there an api I can use to invalidate the page when the link is clicked. Right now the best solution I can think of is to fetch the list on the client
how are you removing the item from the list? via a server action or via an api call?
English AngoraOP
api call
using express.js
@English Angora api call
after that api call, run
router.refresh()import { useRouter } from "next/navigation"
const router = useRouter();
// ...
async function onClick() {
await fetch(...)
router.refresh()
}English AngoraOP
I see
So that means I would have to refresh the page everytime someone adds/removes an item?
I won't be able to do that since I also have a modal with the ability to undo the add/remove action
the recommended way to do this is to use a server action, and inside that action run
but since you are not using a server action, you need to use
revalidatePath or revalidateTag to revalidate the page that you are navigating to.but since you are not using a server action, you need to use
router.refresh() to flush the router cachethere are only two ways to flush the router cache, revalidatePath/revalidateTag and router.refresh()
English AngoraOP
I don't think it's because of the router cache, I think it's to do with the browser cache
Cause when the user hits the back button on the browser the page is cached with the initial list values
it's most definitely the router cache. the browser bfcache only comes into play when the user clicks the back button. it's not like the user hits the remove button and then clicks the back button right?
@English Angora Cause when the user hits the back button on the browser the page is cached with the initial list values
oh well then it is indeed the bfcache, this one i don't have an answer for you
English AngoraOP
Yeah figured this is an issue
bfcache is supposed to work like that: after hitting the back button one would expect to see the exact previous page (even when it's stale) rather than the newest data
English AngoraOP
Do you know a way to opt out of that behaviour?
client side rendering
Answer
English AngoraOP
Haha figured
Thanks man