Cache problem when pressing browser back button
Unanswered
Tan posted this in #help-forum
TanOP
This is the problem: https://youtu.be/QRKBXDSGwVU?si=VWS1TqzKbKzilk9N
How can I refetch the data when I press back in the browser?
How can I refetch the data when I press back in the browser?
41 Replies
TanOP
Table page (the first one):
The details page (second one):
Dunker
use server actions, instead standard fetch
or inside data fetch functions, just write
router.refresh() at last line, or maybe in fetch options, {cache: no-store}if you are sth like react-router look for
refetchTanOP
thanks a lot @Dunker ! I started using server actions on my client component with useTransition!
inside my action i call revalidateTag and everything works perfectly!
I have a last question! In my add function (in the pic) the backend is creating the item and returning it with the correct id, is it possible to make a server action and return the item? How can I solve this?
inside my action i call revalidateTag and everything works perfectly!
I have a last question! In my add function (in the pic) the backend is creating the item and returning it with the correct id, is it possible to make a server action and return the item? How can I solve this?
yes you can return data from the server action
@Tan thanks a lot <@1017915332305879061> ! I started using server actions on my client component with useTransition!
inside my action i call revalidateTag and everything works perfectly!
I have a last question! In my add function (in the pic) the backend is creating the item and returning it with the correct id, is it possible to make a server action and return the item? How can I solve this?
Dunker
move your addItem and updateItem functions to closest parent server component of that client component and pass data from there as props like
// server component
// const data = data fetch logic()
return (
<ClientComp data={data}/>fetch data in server component, pass result it to client as prop
with this way, you wont need transition
from one of my projects:
// app/page.tsx
export default async function Home() {
const cities = await getCities();
return (
...
{cities && <SearchBar cities={cities} />}
}
const getCities = async () => {
try {
const res = await fetch("https://localhost:7095/api/Cities", {});
return (await res.json()) as City[];
} catch (error) {
console.log(error);
}
};TanOP
my component is a big table using TanStack
so far like this is working
@Tan my component is a big table using TanStack
TanOP
it's a bit messy I have to clean it later... what do you think @Dunker ? is this the right approach?
@Tan it's a bit messy I have to clean it later... what do you think <@1017915332305879061> ? is this the right approach?
Dunker
basically rule is easy: 'where you have state, you shouldnt have data logic'
if you wish, i could connect you via live share and show some editions
@Dunker basically rule is easy: 'where you have state, you shouldnt have data logic'
TanOP
this makes sense! I am pretty new to next js and I'm still learning a lot!
@Dunker if you wish, i could connect you via live share and show some editions
TanOP
how dose it work? I would love to see what's the right way to implement my usecase, but I don't want to take your time!
@Tan how dose it work? I would love to see what's the right way to implement my usecase, but I don't want to take your time!
Dunker
no its okay for me, its just a vscode extension to share workspace and live editing
TanOP
i use webstorm 🙂
Dunker
dont you have vscode
TanOP
i have, i'm installing the extension
@Tan This is the problem: https://youtu.be/QRKBXDSGwVU?si=VWS1TqzKbKzilk9N
How can I refetch the data when I press back in the browser?
data are refetch after 30s, that's an implem choice from next.js
revalidating in an action should indeed reset the cache already as far as I understand, because it also cleans your client cache
that's why this cache is mentioned in "The mutations others trigger"
this cache also exists with dynamic rendering
" If that mutation is backed by revalidatePath / revalidateTag it would invalidate the Full Route Cache and Data Cache, but those are server-side, and the Router Cache in my browser tab might still have the previous result from the server, instead of the very latest data."
I think specifically a server action is needed to empty the client cache
because just calling revalidatePath eg in a route handler won't have any effect client-side
"The main thing to keep in mind with this behavior is that the client-side Component Cache that is used when navigating back/forward is only purged when you call one of the purging functions (router.refresh(), revalidatePath, revalidateTag)."
=> technically for revalidatePath, revalidateTag, this is only true if they are called in a server action (I don't know if they can be called client-side too, directly?)
Dunker
✅
having async logic in client components to edit data, problem
the place where server actions are not enough
"use client"
:::
const getDynamic = async() => { // this should trigger onclick, not comes from server or anywhere
const data = await fetch(...)
}
<button onClick={() => getDynamic() /* startTransition(() => getDynamic()) */}for the ones who have similar problems, this situation is kinda edge case
TanOP
Finally I made it!
The experience is pretty seamless!
When I ADD a item I added a 2sec delay to simulate a slow connection and REMOVE works normally! The coolest thing is when ADD is called and for example fails the data is revalidated and the item is removed from the list!!! I love this!
- useOptimistic
- server actions
- revalidateTag
Thanks you all for the help!
The experience is pretty seamless!
When I ADD a item I added a 2sec delay to simulate a slow connection and REMOVE works normally! The coolest thing is when ADD is called and for example fails the data is revalidated and the item is removed from the list!!! I love this!
- useOptimistic
- server actions
- revalidateTag
Thanks you all for the help!