Clearing cache for every user after a mutation

[faint knot]

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?

[torn condor]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[dusky dragon]

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

[faint knot]

:/ 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.

[dusky dragon]

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

[vapid pawn]

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

[dusky dragon]

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

[vapid pawn]

That's how I believe it works

if the data is pulled from unstable cache

[azure lion]

This is def a discussions thing,

Everyone using nextjs would benefit from it

[faint knot]

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.

[torn condor]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1226194390305865760 message)