Clearing cache for every user after a mutation
Answered
Mini Rex posted this in #help-forum
Mini RexOP
I'll explain my problem from this example.
User A:
- Mutates data via server action at route
- Server action calls
- *The page for
- User A gets redirected and can see the newly added item (and all other items that other users might have added in the meanwhile)
User B in the meanwhile is just navigating between routes,
Is there a way to make it possible for the user B (and other users that are just navigating between routes) to always see up to date data on the
User A:
- Mutates data via server action at route
/cats/create- Server action calls
revalidatePath("/cats") and redirect("/cats")- *The page for
/cats is using noStore()- User A gets redirected and can see the newly added item (and all other items that other users might have added in the meanwhile)
User B in the meanwhile is just navigating between routes,
/cats and some other. But user B doesn't see any changes made by User A or any other user for (30s?), unless user B does a full page reload.Is there a way to make it possible for the user B (and other users that are just navigating between routes) to always see up to date data on the
/cats route, whenever some other user (A in this case) decides to mutate it?Answered by joulev
that is due to the router cache and is the expected behaviour. nextjs considers that, since user B did not make the mutation, for user B the stale data is good enough and nextjs will only make a request for fresh data after 30s (the router cache duration)
if you want user B to always see updated data even when the user doesn't initiate the mutation, you need client-side fetching, e.g. with react query or swr
if you want user B to always see updated data even when the user doesn't initiate the mutation, you need client-side fetching, e.g. with react query or swr
15 Replies
@Mini Rex I'll explain my problem from this example.
User A:
- Mutates data via server action at route `/cats/create`
- Server action calls `revalidatePath("/cats")` and `redirect("/cats")`
- *The page for `/cats` is using `noStore()`
- User A gets redirected and can see the newly added item (and all other items that other users might have added in the meanwhile)
User B in the meanwhile is just navigating between routes, `/cats` and some other. But user B doesn't see any changes made by User A or any other user for (30s?), unless user B does a full page reload.
Is there a way to make it possible for the user B (and other users that are just navigating between routes) to always see up to date data on the `/cats` route, whenever some other user (A in this case) decides to mutate it?
that is due to the router cache and is the expected behaviour. nextjs considers that, since user B did not make the mutation, for user B the stale data is good enough and nextjs will only make a request for fresh data after 30s (the router cache duration)
if you want user B to always see updated data even when the user doesn't initiate the mutation, you need client-side fetching, e.g. with react query or swr
if you want user B to always see updated data even when the user doesn't initiate the mutation, you need client-side fetching, e.g. with react query or swr
Answer
Mini RexOP
:/ In that case I lose out on a lot of nice features of the framework.
I feel like having a hybrid with client side fetching will make me go down the road of fighting against the framework in some way.
I feel like having a hybrid with client side fetching will make me go down the road of fighting against the framework in some way.
no you won't fight with the framework, people have been using client-side rendering for many things for ages, what works will continue to work.
nextjs doesn't have real time connections, so there's no way for the nextjs server to tell user B that something changed, if user B didn't make the changes themselves
nextjs doesn't have real time connections, so there's no way for the nextjs server to tell user B that something changed, if user B didn't make the changes themselves
What about using the unstable cache?
I believe if some data is cached and then user a triggers a server action that revalidates the cache tag
Then user b will get a list of the new data when they navigate to the page again
Even if they navigate in less than 30
This is how my super experimental next-realtime package works
Interesting, I didn’t know unstable_cache could bypass the router cache like that. How does it work though, I can’t picture this happening with my current understanding of the framework:
1. Both users are on the same page
2. User A makes changes to the page
3. User B navigates away and then back, less than 30 seconds since they loaded the original page
4. User B sees updated data immediately
1. Both users are on the same page
2. User A makes changes to the page
3. User B navigates away and then back, less than 30 seconds since they loaded the original page
4. User B sees updated data immediately
That's how I believe it works
if the data is pulled from unstable cache
This is def a discussions thing,
Everyone using nextjs would benefit from it
Mini RexOP
Unstable cache seems like an interesting idea, ill try it out as well.
For now adding a
Sadly it seems to kill the entire cache (for every route) and I wish it could just kill the cache for that specific route.
For now adding a
router.refresh in a useEffect on a layout.tsx for a specific route, ie. /cats seems to work. Sadly it seems to kill the entire cache (for every route) and I wish it could just kill the cache for that specific route.
@Mini Rex Unstable cache seems like an interesting idea, ill try it out as well.
For now adding a `router.refresh` in a `useEffect` on a `layout.tsx` for a specific route, ie. `/cats` seems to work.
Sadly it seems to kill the entire cache (for every route) and I wish it could just kill the cache for that specific route.
you could fetch the data in a client component in a server action