Next.js Server Actions Change Everything About React

next.js 13.4 just dropped and not only does it make it so the out router is stable now but it also adds in the ability to do mutations which is something we've been waiting for for over six months and it is an absolute game changer [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner I wanted to create just a really quick video talking about the new server actions inside of next.js because this is something I've been waiting for for so long and it's a way to do mutations inside an xjs with the server as you can see you can do some really cool things you can have functions that essentially run on your server but you use them and Define them inside of client components there's a lot of different ways that you can do this but it's really really cool and I actually have a really simple example that I have set up to show you exactly what I'm talking about so this project right here is relatively straightforward I just have two pages really that are defined inside of here you can see I have this page that has all of my different posts and I'm using a server component to get those posts asynchronously which is part of the app router inside of next.js which is now stable and is really really cool I'm just fetching that data and displaying on the screen over here on top of that I have this page that allows me to create a new post and this is where these really cool server actions come in so if I go over to this page I can just type in a new we'll just call this one AAA put something in the body click save and you can see if I come over here that this post is listed right here which is really really cool now this is something you're probably really used to in something like react router and it's lots of easy ways to do this but with the new server actions inside of nexjs they make it so you can run all this code on your server and the client just looks like a normal client from like a PHP application it's super straightforward let's look at this code real quick and first we're just going to look at the component down here you can see that there is no logic at all inside of this component it doesn't have anything to do with how to create this post all we have is our form which just has some CSS Styles being applied to it and then we have this action right here and this action is this create post function and the Really Nifty thing about that function is this is a function that actually runs on our server you can see I've tagged this with this use server string that essentially says that everything in this function is going to run on the server so all of this code is running on the server and my client knows nothing at all about this this entire component is actually a server component because there's nothing that is being dynamically rendered on the client I just have a normal form input right here and then I have this function right here that is running on the server so if we go back to that new page if I type something into my title or I type something in my body when I click save what happens is that next.js is going to call this create post function is essentially going to send all my data up here to the server and it's going to send it to me in the form of a form data so I can actually get my data out of here based on my title and my body which is just the names I gave to those different inputs down here and then I can send that along however I want whether it's accessing a database or whatever in this case I'm just posting to my API that I have to save this information if we actually inspect the page real quick you can kind of see exactly what's going on if we go over to the network tab I'm going to look just at the fetch request here and if I click save you're going to notice we have this new fetch request and I'll just kind of expand this up a little bit so it's a little bit easier to see there we go and if we go over to the payload you can see it's sending along that title and that body information so it's essentially just making a fetch request for you but all of that stuff is handled behind the scenes which is really really cool and something I really like on top of that something else that we're doing inside of here is you'll notice that inside of our actual git post function we have this next tag that we pass along to fetch which allows us to do things like set a revalidation period because by default every single fetch request you make inside of a server component is cached forever in our case we're saying cache this data for up to one hour and then you know it's going to be stale and it's going to refetch but we also are tagging this with a tag of post and if you're used to react query this is very similar because whenever we create a new post right here we're revalidating that tag which forces us to refetch that data so we're essentially saying hey we've added a new post make sure you invalidate that data so it has to refetch next time then we're just doing a simple redirect to get back to the home page here and just to prove to you that all of this is happening on the server if we open up our console right here and I go over to new and I just start typing something in you'll notice I have this console log right here that says on the server if my code is running on the server this log will show up down here on the bottom left if it's running on the client it'll show up inside of the inspect here for my console right here you'll notice when I click save it adds that line right here on our server so you know for a fact all this code right here is running on the server which means you can put environment variables in here you can put database connections whatever you need it's going to be safe and running on the server which is really great now currently this is in Alpha it's an experimental feature so it's bound to have some changes and bugs so I wouldn't use this in production just yet but I'm really excited to see where this goes because it's constantly pushing what we can do by moving more and more stuff to the server it makes our client easier to write it makes our code easier to reason with and overall it just makes the entire experience of developing applications so much more enjoyable so I can't wait to see how this actually finally ends up and to be able to start building production applications with this now if you're interested in learning more about nexjs I have a giant project using xjs coming out soon I'll link it over here as soon as it releases and also if you're worried about learning react I have a full crash course on react I'll link right over here as well with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 110,443

Keywords: webdevsimplified, next.js, next.js react, next.js server components, next.js mutation, next.js server action

Id: 10Yt5vRimNI

Length: 5min 7sec (307 seconds)

Published: Sat May 06 2023