unintuitive `relavidatePath`
Answered
piscopancer posted this in #help-forum
I ran a build in two tabs, left one created a new row in the DB and called
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('/') 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?
Answered by joulev
when you call a server action with a
that's why:
1. if you call
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
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 data2. 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 purpose2 Replies
when you call a server action with a
that's why:
1. if you call
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
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 data2. 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 purposeAnswer
that clarifies a lot about
revalidatePath, thank you, yeah I will stick with a router refresh