My Problem with Next.js Server Actions
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- 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 - nextjs.org/doc...
Thanks to Xata and Sentry for sponsoring my time to work on Deals for Devs!
Try Xata - xata.io/
Try Sentry - sentry.io/
*Newsletter*
Newsletter 🗞 - www.jamesqquic...
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.co...
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquic...
![[UNCUT]“ฅนตื่นธรรม”ปะทะ“หมอปลา-ปู่มหามุนี-อั๋นโอกิ”สะเทือนกระทรวงเวทมนตร์ Iคนดังนั่งเคลียร์I10 ตค.67](http://i.ytimg.com/vi/peMD_SAkwNc/mqdefault.jpg)
"I pushed this code to production without testing..."
now starts the fun part.
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
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 have to use form prop in button and add id of the form as value so that button knows which form it belongs to
Was scratching my head on for the last two hours, finally with this video was able to make it work
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.
I like the final solution, I feel it makes sense.
1. Not forcing the form to be a client component.
2. The button owns the pending state
Curious how this will work if you have two forms visible at once. Will need to try that out to see if it puts both or just 1 into the pending state.
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 agree completely. I wish my company hadn't gone with Next. But I was too new to make the big design decision. When I am the lead at a startup I am going to go with Remix.
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!
James you are awesome!
@7:35 - Basically any that uses hooks must be converted into a client component or else it won't work!
I think what's happening behind the scenes is the server component that contains the form body must be checked every second or something as ping-pong and it keeps feeding this status back to the hook form in the client side! and most likely this must be a child component because if it was all at same level , because the ui button needs to change visually it therefore requires a DOM render and this can't happen as server level!
Hopefully it makes sense :)
I worked on something similar and had to ask a another engineer where he explained this in this way!
Thanks for the video :)
You have to use form prop on button and add id of the form as value so that button knows which form it belongs to
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
very interesting the way this has to be set up 🤔
Hey James when did you make this course React and Serverless on your website? I know the Astro one is your newest course. :)
Dude, I'm telling you, Remix is Next.js without all these little frustrations!
Great video! :). For form validation @ 9:04, I think you can use z.object({name:... }).strict() to ensure the submit form match your database table schema.
High quality! 🎉🎉🎉
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 the ‘useFormState’ hook. Your server action can then return anything, and it will be made available to the UI.
I find that if I’ve set things up correctly and the form succeeds, I don’t need to return anything (since the form redirects, or invalidates data that gets re fetched, and everything just works), so I just return an object with an ‘error’, that describes what went wrong, when something failed. Just make sure to return ‘{ error: “” }’ when the form succeeds!
(Or a message or error code, when server-side form validation failed, or a legit 500 error where my code had a problem)
When using actions, react hook forms and Zod as validator, the schema validation at submission is not triggered when the mode is "onSubmit" (default). The submission to the action is done, even if the data are not schema compliant. The validation works when setting the mode to "onBlur", "onChange". Any Idea what is wrong?
How you'd expect the hook to work and know which form to target obviously the button has to be a component.
The button would be inside of the form...it doesn't seem that hard honestly lol I think has since been fixed so it couldn't have been that hard.
The problem this approach surfaces, though, is that the useFormState hook now cannot be used in the form component, as it is now not a client component. Handling the validation in your UI will now be more problematic
I think we should ALL just dump any errors in the console and let the user figure it out 🤣
Great video, totally a mistake I would make 💯
Refractor the button 🤦🏻♂️
thank you for giving me another reason why I'm not gonna use Server Actions
I have a form where I have "formsteps" (with values for type, name, placeholder etc) mapped out into inputs with dynamic values. This does not appear to work with the whole server action and FormData thing. If I just have a regular input that isnt mapped out, it works just fine. Has anyone encountered and solved this problem?
I don't know why I feel weird about adding the thank you page, it feels like anyone can access that button without having submitted a deal, I actually ran into a pretty similar situation, I know it's not a big deal, it's just feel like in a perfect world something like the deal id should be passed to the thank you route so that it only accepts created deals, but I don't get to think of a good way to do it, maybe query params idk
You said it’s “exactly” what you did but it’s obviously not haha since the example was a self-contained button component with a loading state while yours was a giant component with the form and loading outside of the form. 😢
It has to be this way because the hook is running on client side. But the button is already in the server boundary since you placed it in the form. So what happens now is that when you click the button, it will not be able to use the hook that’s outside of its server boundary. They probably can do a better job in helping devs visualise these boundaries though.
Easiest way is to use react-form-hook with server action.
i prefer useActionState
const [state, action, pending] = useActionState(someServerActionFn, { some : 'state' })
this video looks more like a someone advertising a product than a nextjs related video, take your thumb down with all my force, you deserve it more than anybody
I did the same thing lol
its just a little bit of misunderstanding :D
Seriously feels like React is taking a step backwards. Things are once again becoming way too overly complex - at least in my opinion.
Eww... `return console.error(error)` console.error doesn't return anything
No no no. Why do we need to jump through so many hurdles. This ruins productivity!!! Just use the pages router, be productive!
pages router and getserversideprops?
pages router sucks and the reason people don't switch to app is because they are too lazy to learn new things
Skill issue
aha thanks!
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.
When using actions, react hook forms and Zod as validator, the schema validation at submission is not triggered when the mode is "onSubmit" (default). The submission to the action is done, even if the data are not schema compliant. The validation works when setting the mode to "onBlur", "onChange". Any Idea what is wrong?
Had the same issue. I guess you found the solution…