Do I need a transition to call a server action in "onSubmit"?
Unanswered
Eric Burel posted this in #help-forum
I have a page where I want to ge the initial value during static rendering, and then relay with SWR client-side to do polling for new values without refresh
The user can increment the value
User can increment the value, when this happens I need to invalidate SWR locally => this means calling "mutate()" after the server action is done => this means I can't write
The doc mentions using "transitions" when calling Server Actions outside of "action", is that mandatory? Can I write
The user can increment the value
User can increment the value, when this happens I need to invalidate SWR locally => this means calling "mutate()" after the server action is done => this means I can't write
action={incrementCounter}, I have to use onSubmitThe doc mentions using "transitions" when calling Server Actions outside of "action", is that mandatory? Can I write
onSubmit={async (evt) => { await incrementCounter(evt.formData); mutate("/api/counter")}Â } or should I also involve transitions here?9 Replies
Small bump
@Eric Burel I have a page where I want to ge the initial value during static rendering, and then relay with SWR client-side to do polling for new values without refresh
The user can increment the value
User can increment the value, when this happens I need to invalidate SWR locally => this means calling "mutate()" after the server action is done => this means I can't write `action={incrementCounter}`, I have to use `onSubmit`
The doc mentions using "transitions" when calling Server Actions outside of "action", is that mandatory? Can I write `onSubmit={async (evt) => { await incrementCounter(evt.formData); mutate("/api/counter")}Â }` or should I also involve transitions here?
The transition is recommended because it marks the action trigger as a react transition, same way react transition is recommended for router methods.
But it is not required. As far as I know, "use server" marks exported async functions as server-side functions callable by the client, so you can use it like normal client-side async functions without having to wrap it inside transition APIs
But it is not required. As far as I know, "use server" marks exported async functions as server-side functions callable by the client, so you can use it like normal client-side async functions without having to wrap it inside transition APIs
What I don't get is that transitions seems needed for slow blocking operations like rendering
while normally an async call should not block
so perphaps it brings the possibility of cancelling the call?
* so i found this very interesting note: [transitions must be synchronous](https://react.dev/reference/react/useTransition#:~:text=try%20useDeferredValue%20instead.-,The%20function%20you%20pass%20to%20startTransition%20must%20be%20synchronous.,-React%20immediately%20executes). meanwhile server actions must be asynchronous. i'm struggling to even cleanly combine the two in a way that TS is happy.
* using server actions without
* using server actions without
startTransition used to be documented in the nextjs documentation, but removed in [this commit](https://github.com/vercel/next.js/commit/b048d7eee2153a6f3e648ea05b099cb4dabbc1e8#diff-26d7b6f385b8e224718492bb7ffb5551eb137f101d3a328e3498a6c0337222fb).i opened this https://github.com/vercel/next.js/issues/57652 because it no longer makes sense to me anymore
@joulev i opened this <https://github.com/vercel/next.js/issues/57652> because it no longer makes sense to me anymore
It's awesome thank you! I am going follow that