Would it look something like this?

const getUser = unstable_cache(
  async (id) => getUser(id),
  ['getUser']
);

async function Component() {
const user = await getUser()
return ...
}

// server action 
function action() {
  //...work
  invalidateTag("getUser")
}

almost.

const getUser = unstable_cache(
  async (id) => getUser(id),
  [], // this array is irrelevant to tagging afaik
  { tags: ["getUser"] },
);

Nice thanks!

Another thing done been thinking about, wouldn’t it be slower refreshing a component after a mutation as compared to an old fashion component who just has to prefetch the json?

In the first case we’re fetching not just the data but also the markup.

I’m thinking about how I used react query in client components. The query just refetches the data for me AND I can even set the data myself on mutation success.

I love the Ux And I’m trying to find an equivalent with server components and actions.

refreshing the component after a mutation only has one single network request (the response payload already includes the updated data for the frontend to use).

if you use react-query then pretty sure it is at least two separate requests, one to mutate and one to re-query.

requests are typically performance bottlenecks so i'd say refreshing the component with an action tends to be slightly faster. but, i don't think there is a significant difference

Oh I thought what happened was:
1. Client -> server action
2. Server action revalidates fetch
3. Client refetches server component with new data

But are you saying the server action returns the updated server component with the updated server component?

You’re right that with react query I have to requery, but I thought revalidating was initiating a “requery” by rerequesting the server component.

i'm not 100% sure, but i'm fairly confident that "a single network request" is true because
1. if my memory doesn't fail me, i did see "single request" as a selling point that react and nextjs maintainers used, to advertise server actions
2. the response payload of react server actions is interesting

you can make a test app and see if it's one or two http requests

Awesome, thanks for the help @joulev !

just curious though, did you check and is it indeed a single network request? sorry as im a bit lazy to open my editor and im pretty curious about this one

I’d check but I’m not home right now haha @joulev

So i just switched to tag invalidation. It seems like the whole page is refreshed.

I've got _layout.tsx -> page.tsx where page.tsx is calling the function I've wrapped in unstable_cache and tagged. When I invalidate the function, the console.log statement I've got inside _layout.tsx executes, meaning the whole page gets refetched.