The 3 REAL benefits of Next.js Server Actions

let's talk a little bit more about the server actions and next year as there are basically three real advantages of these server actions so in a previous video we looked at a to-do's application and I completely walked you through from A to Z and how to set up these server actions including the use form status and the use optimistic hooks so you really get a Cutting Edge UI that way in this video Let's quickly talk about what what are the real benefits let's compare the old way of doing it with the new way so imagine we have just a simple to-do's page again we have just a list here and I can add something here right so I could say something like do the dishes if I now click on ADD here it's going to add this to the database and eventually it also puts it here in the list alright so how would we do this with the old way so now let's take a look at the actual codes here so let's talk about how you would do this the old way so you have a form and in the form we have that input and then a simple button I remove the styling here right so just to keep it basic so you would have a form and then you would listen for the onset mid or maybe on click on the button all right so on here we're doing with on submit so then when the form gets submitted we will have some event handler let's say handle submit and you could Define that up here and then in here you would basically make a fetch call to one of your API endpoints right so here we would make fetch or maybe using axios it's the same story axios.post or right so you had to create this API endpoint on your server and then you would have to do all this stuff right method post because we want to add something to this resource so it's going to be post request we have a body with json.stringify we have to make sure that this objects here that we're sending is in Json format and then the actual content property it's going to be the input text right so if it's a control component you would have use States here you need to use you state and then you use that as the value and then when it gets changed you would use the on change event handler here to update that value right controlled component if it's not controlled you would use user app to make sure you have mastered the underlying fundamentals both react as well as next.js I have a course on that very soon coming out highly recommend you get on the email list or you'll be notified and then you would all have headers there that's necessary for post requests as well and so this has how you would do it traditionally so how does the new way look like so the new way this I don't even have to scroll it's all in view here it's still a form and we still have an input and we still have a button but now we have this action attributes this is something that you may have seen in plain HTML before you could use like an URL and then the browser would submit the form data to the URL but in next.js these days you don't you don't really pass it around you pass just a plain JavaScript function and that's that's the actual server action here right so I'm importing the table we'll take a look at that in a second this is all the front end and just looking at the front ends here as you can see it's much cleaner and we don't have to have some ugly fetch call or axios we don't have to keep track of state or use rap we don't have to use those hooks and let me actually split the screen here so here I'm going to zoom out a little bit so we can properly compare it so on the left side we have the old way on the right side we have the new way right so here you can see we have basically removed this entire handle so submit we don't need that anymore but we only need to pass a function a server function server action to this action attribute right so this is how the front end looks like let's take a look at the back end so traditionally you would have to submit this to the API endpoint so you would have to create an API endpoints right so in node.js you would use something like Express to deal with that and maybe you're already using next to us so then you could have like an API route right so like this you can still do this by the way there are some exceptions but right so then you would have your your route and here in next year s you would have to do it like this so we're exporting a post function here and we can grab the request you would grab the content from there you have to parse it as Json and then I'm using Prisma here to create that actual to do item in my database and then you can return some next response to the client again right and to make sure that you are actually sending it to the correct URL you have to be careful with the uh the structure here of your of your folders and files right so it's all about the structure of folders and files so here it's the to do directory in the API directory so you get slash API slash to Do's right so that's where that's where I would need to export my route here right so this is all basically the traditional way right without server actions all right so now with server actions right so now we have this function and let's take a look at that function so it's I usually going to have an actions uh so here I have my function so here it's a it's called add to do it's called add to do here and let me make that a little bit wider so at the top I have use server so that this function will only run on the server it's a market as a server action so as you can see it's just it's just a JavaScript function right it's asynchronous it takes informed data so here if you pass the function as for the action attribute next.js will make sure that you get access to that form data automatically right so here we had to use you state and then you can use you can keep track of the actual text the input text like this you have to pass it manually like this and then you can get access to it on the server here right so now we don't need to do that we automatically get access to that here in form data right so that's a formdata.get to get the actual content then we can actually add it to a database and then we can just return a normal JavaScript object right so not with this strange next response.json we can just return a normal JavaScript object and we can do something with that on the clients if we want it's automatically stringify to Json so all of that is handled for us under the hood by next year ads right and now we also don't need to pay attention to like the structure of our folder here and files it's just a normal JavaScript function that we can just uh we can just we just have to put new server at the top and Export it and then just import it like any other you know utility function or perhaps other function that you you would use like that right so here this whole API route stuff this whole fetching stuff has all been abstracted away from you right so now your API route has basically just become a normal JavaScript function put your business logic in your function and just invoke that function here by adding it to the action attribute that's the first major advantage you don't have to create these API routes and actually submit something manually like this that's all handles for you behind the scenes and just to prove that to you I can inspect here and we can look at the network tab to show you that there is actually still a fetch request here so here I can add something let's say I will just say test if I click add here you can see there is actually a fetch request here and eventually it gets added here if I click on this fetch request you can see there is actually a fetch request being made but this is using server actions and we are not using you know we're not writing fetch or axios but we still have a fetch request and we can see the payload of that fetch requester is indeed test here you know as part of that data and there's also some action identifier some other identifier and this is just next to us right next.js is making that fetch call for us behind the scenes it still exists but we don't have to deal with this fetch or axios ourselves right so we can focus now more on the actual business logic instead of wiring up you know our API route with some fetch call we get a better focus on the business logic as a second big benefit that we get from server actions is that it makes these is that it will make loading state for example very easy so traditionally if you want to show like a loading State typically you would create like another state variable you know something like um is submitting is submitting and then before you make the actual fetch call you set it to true and then after you can set it to false again right lots of boilerplate to keep writing this this pattern and then here when it's submitting you know you can add some logic here to the button if it's submitting we could say something like adding and otherwise it will just be add right so to give the user a few some feedback that there's actually something happening so how would you do that with the new server actions here so we get we actually get a hook here it's called use form status and it's currently still experimental so if you import it it will look like this and you can Alias this so you can say s just use form status so then you can just use this name this will give you I will just show it here this will give you a pending value here so when you you can use this hook and it will give you a pending value and so then here in the button you can do something like pending whatever you want to add right so now we get the the same results without having to create the the state variable and doing this true and then false this is much cleaner now one caveat to this though is right now this won't work because you do need to make the button its own child component of this component and then you have to use this in that button component right so we would have to refactor this into its own button component and then use the hook in there this is just an example the form with the server action needs to be an ancestor of where you're using this hook so here we need we need to make this basically its own components right and then we have to use it in there and check out my other video if you want to have an actual walkthrough of how to implement this hook as well because I'll show you how to do it there another really cool hook that we get is the use optimistic hook it's also experimental but this also works really nicely with server actions so as use optimistic and this means when you add something to the page so test five let's say if I click here now it's going to take some time right so I'm waiting like two seconds and then it pops up but we know it's gonna succeed most of the time so we might as well just immediately show it here on the page we don't even need a loading indicator if we do that right so we can be optimistic about the result and just immediately put it here and then if the you know mutation on the surf or the there's something going wrong on the server and it didn't actually it wasn't able to add it to the database then we want to refer to that this hook makes it very easy again if you want to see it go go look at my complete walkthrough of a server action but we also use this to immediately update the UI and that's going to be the future of UI so it's going to be very Snappy like that so it's really cool to see that and this works in conjunction with server actions right so again how would you do that traditionally well that would be you know that would be a lot of calls that would be a big mess so this is really exciting and this is the second major benefit you get these very useful hooks out of the box that replace a lot of that boilerplate code you will see people mention some other benefits as well like Progressive enhancement and that means that this will work so if I remove this here this will work even if there's no JavaScript on the client so if the JavaScript fails to load and this will still work or the user as the JavaScript turned off it will still work or basically there doesn't need to be any additional JavaScript shipped to the client so the client-side JavaScript bundle can be smaller and so there is complete Progressive enhancement if you do it like this now in the real world we do want to have some client-side logic here so we do need to ship some additional JavaScript and we will lose some of that Progressive enhancement because typically you know in the real world we do want to do some client-side things here right so here this action instead of immediately invoking the server action more realistically and again check out the other video if you want to see the whole example more realistically you're going to get the form data like this you can just pass a function here before you invoke that server action you can call it like this and this is going to be async let's just add that here as well before you actually call the server action like this typically we do want to have for example validate input data you know client side and then also the server side of course but also client-side maybe we also want to reset the form you know resets the form and then if this produces an error we do want to be able to grab the that error from what we get back and then you know if there is an error we want to have like a toast message hey something went wrong right so we have additional logic around this here so typically you don't just want to invoke the ad to do what like what we have before there's going to be surrounding logic client-side logic in the real world also that optimistic UI hook also you need to invoke that before you call the actual server action for example practically speaking you will need some client-side JavaScript and you will lose some of that Progressive enhancement but you do have some Progressive enhancements so that's the third benefit you still get some Progressive enhancements so this form will be prioritized with hydration for example and it will be interactive before other elements on the page right so there are still some Progressive enhancement about this error by the way I'll make a separate video on that next so make sure you subscribe check out the other videos on my on server actions but yeah I think it's a really exciting feature I really think it's going to be the future of web app development I hope this was helpful check out my react nextges course will be released soon make sure you get on the email list I do want to say I see a lot of people jump when to react make sure you have mastered the underlying fundamentals before you do that those are both JavaScript as well as CSS I have courses on them both check out the links in the description thanks for watching and hope to see the next one bye

Channel: ByteGrad

Views: 16,385

Keywords: Next.js, nextjs, react, server actions in next.js

Id: Qo_lxOI9GZU

Length: 12min 10sec (730 seconds)

Published: Sun Jul 23 2023