Next.js Discord

Discord Forum

unintuitive `relavidatePath`

Answered
piscopancer posted this in #help-forum
Open in Discord
Avatar
I ran a build in two tabs, left one created a new row in the DB and called revalidatePath('/') to drop server Data Cache. Even though the Data Cache was dropped, only the left tab received the reflected changes, while the right tab was displaying stale data. Only when I hard refresh the right page, the changes can be seen.

I initially believed that a nextjs app uses a some kind of a listener on every client to realize that the current cache was dropped (by somebody else triggering a server action and calling revalidatePath, let's say), but that's not true. Then why does refresh only take place on the initiator's client after clearing Cache?
Image
Answered by joulev
when you call a server action with a revalidatePath inside it, the response payload of the action also includes the new data and the instruction that the client-side react tree renders that new data to the DOM.

that's why:

1. if you call revalidatePath in a route handler instead of a server action, the new data doesn't immediately arrive and you must reload the page or wait for the router cache duration to expire to see the new data

2. mutation in server actions makes it possible to update the data and get the updated data in one single http request (compared to one mutation request and a separate query request like we usually see)

3. the new data can only show up in the react tree that receives the instructions and the new data in the payload, i.e. the tree from which you fire the server action. this is why the left window works while the right window requires a reload (or you have to wait for the router cache to expire)

server actions don't have real-time functionalities. if you need real-time you need to implement it yourself via websocket/sse. or you can also fake real-time by running router.refresh() on tab focus – but all of this you have to implement yourself and server actions are not designed for this purpose
View full answer

2 Replies

Avatar
when you call a server action with a revalidatePath inside it, the response payload of the action also includes the new data and the instruction that the client-side react tree renders that new data to the DOM.

that's why:

1. if you call revalidatePath in a route handler instead of a server action, the new data doesn't immediately arrive and you must reload the page or wait for the router cache duration to expire to see the new data

2. mutation in server actions makes it possible to update the data and get the updated data in one single http request (compared to one mutation request and a separate query request like we usually see)

3. the new data can only show up in the react tree that receives the instructions and the new data in the payload, i.e. the tree from which you fire the server action. this is why the left window works while the right window requires a reload (or you have to wait for the router cache to expire)

server actions don't have real-time functionalities. if you need real-time you need to implement it yourself via websocket/sse. or you can also fake real-time by running router.refresh() on tab focus – but all of this you have to implement yourself and server actions are not designed for this purpose
Answer
Avatar
that clarifies a lot about revalidatePath, thank you, yeah I will stick with a router refresh