How does revalidatePath invalidate the client-side Router Cache when called from a server action?
Unanswered
West African Lion posted this in #help-forum
West African LionOP
I'm just curious about how can this be implemented. It's really strange that a piece of code in the server is being able to tell my client what it needs to do. Does the endpoint that get's created with the server action code always return a piece of information about what the client needs to refetch?
3 Replies
server actions return new React Server Component payload when you revalidatePath()/revalidateTag() from inside the Server Action.
It makes a single round trip, you request a mutation, the mutation executes and then if you revalidate you’ll get the new RSC payload on the client as soon as the Server Action is executed, effectively refreshing the contents of your page (if anything changed) since now React reconciles the new Virtual DOM coming from the RSC Payload
It makes a single round trip, you request a mutation, the mutation executes and then if you revalidate you’ll get the new RSC payload on the client as soon as the Server Action is executed, effectively refreshing the contents of your page (if anything changed) since now React reconciles the new Virtual DOM coming from the RSC Payload
It’s not that the Server is telling your Client what to show, instead the server sends the new Payload for the client (React) to reconcile and match the latest Server State
Server Actions integrate with the Next.js caching and revalidation architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#behavior