Create a Server
My Problem with Next.js Server Actions
My Problem with Next.js Server Actions
#Problem #Next.js #Server #Actions
“James Q Quick”
I spent hours trying to get loading states to work with Server Actions. Here’s what I learned about how to fix it along with a few other tips and gotchas.
Server Actions –
Thanks to Xata and Sentry for sponsoring my time to work on Deals for Devs!
Try Xata –
Try Sentry –
**Newsletter**
Newsletter 🗞 –
**DISCORD**
Join the Learn Build Teach Discord Server 💬 –
Follow me on Twitter 🐦 –
Check out the Podcast –
Courses –
**QUESTIONS ABOUT MY SETUP**
Check out my Uses page for my VS Code setup, what recording equipment I use, etc.
source
To see the full content, share this page by clicking one of the buttons below |
how to let my component know that form submission was successful or got rejected? basically how can I return data from my server actions?
It's exactly what I have been struggling with the past couple of days! Except that I'm trying to upload a new avatar with a preview, which complicated things a bit. But thank you for this video!
almost the same issue, but i choose to use zustand where it has "loading and action key" so each action has its own pending/loading state
I think it makes more sense if you think of the form as a context provider. The useFormStatus can't be used above the context of the form, and as others have mentioned what if you had multiple forms on one page? Also its honestly a better way to to code it anyways since your form stays mostly server side and and your submit button can now be reused in any form component and it'll just work. Definitely a bit annoying though if you don't know the rules. Gonna need some eslint rules to help with things like this I think
When I head about useFormStatus (when it was unstable), me too had no idea what that button has to be in a separate component…
I went through that same issue few weeks ago. its really a weird design decision and as you said they probably have a reason for this. it is what it is, but this is when I always have the impression that Remix do things better.
"I pushed this code to production without testing…"
now starts the fun part.
Router 6.4 loader and action saved me from a lot of headache and Nextjs implementation just doesn't feel right. Remix is the way.
you can replace that with
const [isPending, startTransition] = useTransition();
very interesting the way this has to be set up 🤔
just use remix lol, not a big fan of react but i can tell you next js not the way
To be fair, your pending variable from useFormStatus would have no way to know which form to target if there were 3 different forms in your component
you can put that actions file inside your app directory using the app router, it doesn't need to be in the root. I ended up using a dedicated actions file per view, which created a "model view controller" like structure.
Dude, I'm telling you, Remix is Next.js without all these little frustrations!
I did the same thing lol
thank you for giving me another reason why I'm not gonna use Server Actions