Next.js Discord

Discord Forum

What is the benefit of using Server Action with startTransition?

Unanswered
Black carpenter ant posted this in #help-forum
Open in Discord
Black carpenter antOP
The Server action Next.js docs mention that when using a server actions on client you can use startTransition to execute the server action.
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-using-starttransition

Then underneath that there is also a section that shows how you can execute a server action without startTransition just by awaiting the server action.

I wanted to understand the differences between both the approaches, because apart from startTransition offering an isPending boolean to show a pending state I don't see a lot of difference. So I wanted to know if there are any other benefits of using startTransition for server actions instead of just awaiting the server action? Does it still mark the interaction as non blocking as it does with state updates with normal React? Or are there any other things that I am missing here?

5 Replies

tafutada777
Does it still mark the interaction as non blocking as it does with state updates with normal React?
i think so. just to avoid users from blocking UI interaction, due to the slow updates by mutations.
indeed, the official doc says you do not need use startTransition if you are not doing mutations.

Custom invocation without startTransition
If you aren't doing Server Mutations, you can directly pass the function as a prop like any other function.
Black carpenter antOP
Okay, but what benefit does using startTransition serve if we're doing mutations on the server?
@Black carpenter ant Okay, but what benefit does using startTransition serve if we're doing mutations on the server?
aardani
You can set loading states if you have async server action mutations
@aardani You can set loading states if you have async server action mutations
Black carpenter antOP
Yeah but I guess I can do that by creating a state for loading as well and mark it as false and true before and after awaiting the request respectively
tafutada777
it's nice to have feature so if you don't care about UX, it's okay i guess.
this video helps
https://www.youtube.com/watch?v=E4Eta9wh0hQ