My Problem with Next.js Server Actions

Рет қаралды 13,623

5 ай бұрын

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/docs/app/api-refer...
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.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses

Пікірлер: 42

@elramtv 5 ай бұрын

"I pushed this code to production without testing..." now starts the fun part.

@francismori7 5 ай бұрын

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

@ukeshrestha 5 ай бұрын

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

@masonsten 5 ай бұрын

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

@mathiasriissorensen6994 5 ай бұрын

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!

@nickculpin 5 ай бұрын

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.

@noeldolan518 5 ай бұрын

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.

@codeSTACKr 5 ай бұрын

very interesting the way this has to be set up 🤔

@jeromealtariba7339 4 ай бұрын

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?

@rafi-hidayat 5 ай бұрын

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

@ukeshrestha 5 ай бұрын

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

@ronaldpaek 5 ай бұрын

Hey James when did you make this course React and Serverless on your website? I know the Astro one is your newest course. :)

@metalbroga 5 ай бұрын

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.

@patrickjreid 4 ай бұрын

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.

@user-sj2pg7tz7i 3 ай бұрын

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 :)

@user-gq9vz9yg3q 3 ай бұрын

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?

@RationalDissonances 5 ай бұрын

how to let my component know that form submission was successful or got rejected? basically how can I return data from my server actions?

@jmagrippis 5 ай бұрын

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)

@petecapecod 5 ай бұрын

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 🤦🏻‍♂️

@yassinesafraoui 4 ай бұрын

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

@JustCode39 5 ай бұрын

thank you for giving me another reason why I'm not gonna use Server Actions

@hongz1 28 күн бұрын

Easiest way is to use react-form-hook with server action.

@bradgarropy 5 ай бұрын

Dude, I'm telling you, Remix is Next.js without all these little frustrations!

@colinclark7854 3 ай бұрын

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

@jonathangamble 5 ай бұрын

I did the same thing lol

@iwanttopunchtheosface 5 ай бұрын

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.

@mDHARYL 5 күн бұрын

its just a little bit of misunderstanding :D

@haroldpepete 2 ай бұрын

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

@tr.j4079 4 ай бұрын

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. 😢

@tr.j4079 4 ай бұрын

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.