Server Action vs manual fetch

[khuezy]

Hi, does server action do anything special under the hood that may cause issues w/ internal states/render?

See:
https://codesandbox.io/p/devbox/dndkit-qdvhnz?file=%2Fapp%2Fdnd%2Fclient.tsx%3A27%2C1-33%2C9
NOTE: since codesandbox has issues w/ the latest react 19 rsc, you want to:

1. Open a new terminal
2. npm run build
3. npm run start -- -p 3002
4. Go to the app on port 3002

OR download and run it locally.

Context:
I'm using a drag and drop library (dnd-kit). When the drag end, I call a server action:

onDragEnd={() => {
        helloServerAction();
      }}

But the drag element disappears until the server action resolves and then it reappears. When using the regular fetch, this doesn't occur, eg:

onDragEnd={() => {
        fetch("/api/hello"); 
      }}

Both the server action and the /api/hello has a 2 second delay to demonstrate the odd behavior.
In the client.tsx component, I log console.log(items); the server action/api call do not cause a rerender, so I'm confused on what's causing the drag element to disappear.

react: rc
next: 15.0.0.canary.68

Using Server Actions:

Using fetch('/api/hello')

[icyJoseph]

Right, the way you are calling fetch is a fire and forget kind of thing, whereas, IIRC, the server action, can modify cookies, and stuff, and that in turn would need the application to re-render, but I am honestly guessing a bit, off your experience.

Maybe if you use https://react.dev/reference/react/useActionState#noun-labs-1201738-(2) ?

[khuezy]

Hey Joseph thanks for your insight! About it being rerender, I don't see the log after the server action is called. So I think the component isn't rendered... maybe it's rerendered at a different level?

[icyJoseph]

Maybe it bails out, because there are no changes 🤷 ?