Router Cache and refresh SSR components.
Unanswered
Chinese Egret posted this in #help-forum
Chinese EgretOP
Hi all. So I have the following scenario:
I have a modal that contains a button which sends a POST request to the server, and each request performs an update on the database.
When the modal is closed, I trigger a
Now, let's consider the following scenario:
1. user opens the modal and clicks on the button (POST request + database update);
2. without closing the modal, the user clicks on the browser back arrow button and then on the browser forward arrow button;
3. user lands on the page that display old data, because of the Client Router Cache, and not the new data.
How do you deal with this situation in order to get new data even if
From docs:
Maybe I can call
Thank you.
I have a modal that contains a button which sends a POST request to the server, and each request performs an update on the database.
When the modal is closed, I trigger a
router.refresh()Now, let's consider the following scenario:
1. user opens the modal and clicks on the button (POST request + database update);
2. without closing the modal, the user clicks on the browser back arrow button and then on the browser forward arrow button;
3. user lands on the page that display old data, because of the Client Router Cache, and not the new data.
How do you deal with this situation in order to get new data even if
router.refresh()From docs:
It's not possible to opt out of the Router Cache. However, you can invalidate it by calling router.refresh, revalidatePath, or revalidateTag (see above). This will clear the cache and make a new request to the server, ensuring the latest data is shown.Maybe I can call
revalidatePathThank you.
11 Replies
Yeah,iirc simply call one of the two revalidate (path/tag) functions after you do your db update. If you are using a route handler, you can do it directly inside the route handler.
@Clown Yeah,**iirc** simply call one of the two revalidate (path/tag) functions after you do your db update. If you are using a route handler, you can do it directly inside the route handler.
Chinese EgretOP
Ok, how do i know the correct path to invalidate?
Two examples come to mind:
1. Add the current path to be invalidated to the body of the POST request
2. Invalidate all the paths that call the API, ignoring which one is actually doing the request.
Both approaches seem a bit excessive to me, I honestly don't know if there is a simpler method.
Two examples come to mind:
1. Add the current path to be invalidated to the body of the POST request
2. Invalidate all the paths that call the API, ignoring which one is actually doing the request.
Both approaches seem a bit excessive to me, I honestly don't know if there is a simpler method.
@Chinese Egret Ok, how do i know the correct path to invalidate?
Two examples come to mind:
1. Add the current path to be invalidated to the body of the POST request
2. Invalidate all the paths that call the API, ignoring which one is actually doing the request.
Both approaches seem a bit excessive to me, I honestly don't know if there is a simpler method.
Better choice would be to just use
revalidateTag and attach the tag to the fetch you want to revalidate@Clown Better choice would be to just use `revalidateTag` and attach the tag to the fetch you want to revalidate
Chinese EgretOP
Data are loaded via SSR, not using fetch request.
Dont know if I can attach a tag to a Server Component and rivalidate the cache for that specific Component.
@Chinese Egret Data are loaded via SSR, not using fetch request.
Ok i am confused. So you post using route handlers and fetch using server side fetching
?
If you are fetching server side you need to use something called
unstable_cacheChinese EgretOP
Server Component A load a list of elements from DB and pass the list as a prop to a child Client Component B. B can open a modal that sends POST requests to the server and updates the database. When the modal is closed, then router.refresh is called.
@Clown If you are fetching server side you need to use something called `unstable_cache`
Chinese EgretOP
Mmm. I understand.. so I should wrap my server Component function with unstable_cache and assign a tag. Then I can revalidate that specific tag.