Hey all, I'm trying to figure out how (or if it's possible) to do a certain pattern.

At our company, our Next.js frontend points to a backend API that relies on a lot of external services, all with their own fun quirks and rate limits. Given this restraint, we try to "fetch" new data as infrequently as possible.

To achieve this, we use a pattern on our API that is fairly common, where after a successful mutation (POST/PUT requests), the API returns the entire updated resource(s) , and on the frontend we leverage React Query and it's cache, as opposed to doing the common frontend pattern of "update happened, call my GET request again".

Recently I have been flirting with the idea of starting to dive into server actions more (we already use app router and utilize best practices like prefetching/hydration/etc). But I am concerned with this pattern, as I can't seem to find many docs on how to achieve my use case.

For example, one of my page.tsx files might look something like this currently:

// very simplified user server page
export default function UserPage({ params}: { params: { userId: string }) {

void prefetchQuery(userId, {someFetchHere});

return (
  // HydrateClient omitted
  <div className="grid...">
    <ClientUserDetails />
    <ClientUserPosts />
    <ClientUserFriends />
  </div>
  )
}

I can then, if I needed to, do a React Query useQuery in each of those client components with the userId, and be good to go, and if the user calls a mutation, I can just update that relevant query cache like queryClient.setData(userQueryKey).

With moving to server actions, my goal would be to largely move away from React Query where possible. So instead of calling a useMutation that POSTs, I'd call a server action that calls a POST.

But... as far as I'm aware, the only two ways to "get new data" from a server action are:

1. Calling the revalidateTag or revalidatePath methods, which from what I can tell (unless I'm vastly misunderstanding how they work), are not an option. It appears these just call another fetch on the original get endpoint.

2. Using useActionState to get the new data from the POST. But, with useActionState, how can I spread an updated state from one of the client components, to all of the client components from above? Is it just a skill issue? Would it just be a matter of re-composing my components?

Sorry for the wordy question, would love some insight on this if anyone's had similar experience