next.js server actions are game changing

all right so I've been kind of playing around a little bit with uh react server components and this new server actions that next provides if you guys aren't aware there is a new approach that is in version Alpha where basically you can take forms and call methods directly in your next application and it's going to run that code in your backend right so you have access to your database you'd have access to checking authentication and basically what this allows you to do is co-locate your fun encoding your backing code in the same file potentially and you can kind of not need to and basically you don't need to make an API right you can just have a form in vocal in action that action can do some database logic and then return some data like I said this is on Alpha so it's subject to change who knows it what the feature is going to hold it this is even going to stick around so I have a little prototype that I've been playing around with just to kind of wrap my head around these Concepts and I want to share what I've learned along the way so I have a page here it says page TSX I'm using the app directory in next 13.4 and this is a server component I think because I have the async keyword here I think by default most things in next are going to be server components unless you like specify that they're client components with interactivity but anyway we have a page here and if I look at the page it looks like this super basic page we have some stuff that's displayed here and we have two forms now the difference between these two forms is that this one at the bottom is like a a form that is a client component and the one on top is a server component form so what do I mean by that let's just look at this code the top form is a form that is rendered when the server generates the page and when you type into this input and you submit the form it calls a server action right that's the new thing that we talked about in the next 13.4.1 a server action so this is actually going to call some code which is going to invoke a function that's going to run on your back end right so if you look here I have a function called set name that uses the node FS to basically overwrite a file here with whatever name that you provided from the form okay so the user can type in a name like Bob this is going to call this function that gets ran on the back end it overwrites this file with a new name and then it revalidates the front end to have it basically reload the component so let's see that in action if I go ahead and type in like Bob here if I click submit notice that this does a post request to the existing URL here okay it sends over a payload this is the weird thing it sends over a payload with an action ID and it has like your form data where it says Bob here and then it has this other thing down here I really don't know what this stuff is I didn't look into it but I'm guessing react next has a smart way to basically map the formula submitted to the proper back-end function that you're trying to call right I'm guessing this action ID is mapping somehow to this function or maybe it's a file or something I don't know someone smarter than me who has more time can kind of explain that in the comments probably but anyway when you submit the top form it does this post request to the same URL sends over this data next figures out that hey I'm trying to do like a servered server action it runs this code it does its logic and then basically it tells the UI that you need to clear your cache and like reload the page which is going to rerun all this logic again where it basically calls it name this is calling an FS read file sync from name.txt if we look at that it just has Bob in it and then it sends over that data here and then we render out here so the cool thing about this is that your page doesn't ever re-reload okay so if you look here there's no loader icon um if I type in like Sally hit enter notice that this never becomes a spinner because the the page isn't actually doing a full reload like you'd see like a postback with asp.net or PHP next is basically smart enough to figure out what came back um and just refresh the page and load the new data as needed so that's how the server actions work with a server rendered form now we have another component here called a client form now why did I call it a client form well if you look into the code the top of the component we have a use client string which tells next and react that this is a client component which allows you to use like on submit event listener things that you do on like a normal react application right okay and so this is just a normal form like we have a form here it has an input that has an on change listener that basically updates the state when you type into the input box and then we keep track of what the user typed in here now the main difference between this form is that we're not calling action equals set name right this is the server action instead we didn't want to use the action on the form because you actually can't because this is a client component so the alternative is you can do something called a start transition and you can import your server action up here at the top and then you can basically just invoke it with whatever data that you want so this because because this method takes in a form data I had to actually create a form data and then set the name based on State pass it in and then basically this same logic happens um this is going to invalidate the page that we're at and then it's going to refresh so let's just go ahead and type in like Bob here and click submit and that's about all it is I mean so it basically kind of works the same way but the cool thing is that now you have a client component that's actually invoking some back-end code um and you don't actually have to like make an API to you know have an endpoint to expose this function you don't have to bring in trpc to set up a mutation endpoint you just call the function and it does the the work for you right which is pretty cool I I think it's pretty cool I'm kind of curious how this will play out over the next couple of months I do believe this might actually change a lot of the ways that we um write applications a lot of people like to compare this to PHP but like if you've written PHP or esp.net like when you submit a form in PHP it literally refreshes the whole page the server checks that you did a post request the server will basically run some of that PHP code to save something into the database and then the server basically just re-renders the entire page back out to you and like you don't have that highly Interactive functionality potentially that you can do with react with these client components and stuff like that the last thing I'll mention is that in order to get this working you have to go into your next config and you have to set experimental server actions true otherwise you can't do the stuff that I just showed you in this little demo but yeah hope you guys enjoyed watching this little overview and learn something new about how server actions work in this new version of next and last remark remember it's Alpha so don't expect this stuff to be set in stone anytime soon I'd probably see in the next year or so like this would actually be usable in production anyway like always I have a Discord you're welcome to join if you just want to find a place to hang out with other developers and ask questions and other than that have a good day and happy coding

Channel: Web Dev Cody

Views: 9,518

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: pDtlal2-oEE

Length: 6min 57sec (417 seconds)

Published: Mon May 08 2023