Client cash management and router.refresh()
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hello. I have difficulties with understanding how to work with client cash. As far I understand currently you can revalidate only the entire client cash (even if you use experimental server actions and revalidatePath('your/custom/path') it always revalidate all client cash), please correct me if I'm wrong.
I have read the recent discussion and related issue with detailed explanation of cashing: https://github.com/vercel/next.js/discussions/54075
It is more or less clear for me how it works. However I'm struggling to implement even very basic functionality with a current stable version of Next (I'm trying to check as often as I can the updates for experimental features, but I'm not really open to use them for prod now).
The problems appear when I start to develop parts of the website that should always display the most relevant information (based on my understanding of standard UX in the current web). There are some examples in the discussion I mentioned above. But I will also describe one of my cases, because it is very common in my opinion. It is the 'save to favourites' feature: you have a catalogue page with a list of something, let's call them simply Cards, you can add them to Favourites. Let's keep it as simple as it can be without any optimistic updates. Here are some options I tried and I saw other suggested, but the don't work:
I have read the recent discussion and related issue with detailed explanation of cashing: https://github.com/vercel/next.js/discussions/54075
It is more or less clear for me how it works. However I'm struggling to implement even very basic functionality with a current stable version of Next (I'm trying to check as often as I can the updates for experimental features, but I'm not really open to use them for prod now).
The problems appear when I start to develop parts of the website that should always display the most relevant information (based on my understanding of standard UX in the current web). There are some examples in the discussion I mentioned above. But I will also describe one of my cases, because it is very common in my opinion. It is the 'save to favourites' feature: you have a catalogue page with a list of something, let's call them simply Cards, you can add them to Favourites. Let's keep it as simple as it can be without any optimistic updates. Here are some options I tried and I saw other suggested, but the don't work:
1 Reply
Northeast Congo LionOP
1) click 'save' on card_1 in /catalog -> open /favourites page right after (less then 5min or even 30sec)
Result: no card_1 in /favourites
2) Let's try to add prefetch={false} to /favourites:
Result: first time you click 'save' card_1 is in /favourites
-> back to /catalog -> unsave card_1 -> back to /favourites -> card_1 still there
3) Let's try to add router.refresh() after each save/usave click:
Result: everything works now with card_1 !! But if you try to save/unsave a carnd_N you need to scroll to the bottom of the page, obviously router refresh will turn you back to the top of the page -> horrible UX
4) Let's try to call router.refresh() each time /favourites opens
Result: it seems to work but, but now we refresh the router literally always, even if /favourites was just fetched and rendered
The same issue happens with deleting and adding new element to whatever collection/list.
The main reason of creating this discussion is to find a way to implement an expectable standard behaviour for these common use cases with the most resent stable features of Next.
Result: no card_1 in /favourites
2) Let's try to add prefetch={false} to /favourites:
Result: first time you click 'save' card_1 is in /favourites
-> back to /catalog -> unsave card_1 -> back to /favourites -> card_1 still there
3) Let's try to add router.refresh() after each save/usave click:
Result: everything works now with card_1 !! But if you try to save/unsave a carnd_N you need to scroll to the bottom of the page, obviously router refresh will turn you back to the top of the page -> horrible UX
4) Let's try to call router.refresh() each time /favourites opens
Result: it seems to work but, but now we refresh the router literally always, even if /favourites was just fetched and rendered
The same issue happens with deleting and adding new element to whatever collection/list.
The main reason of creating this discussion is to find a way to implement an expectable standard behaviour for these common use cases with the most resent stable features of Next.