Next.js 13 - How to ACTUALLY use Server Actions (caching & revalidation)

did you know that you can create endpoints with next test server actions just by adding simple functions to your components that's right you don't anymore have to create API routes for each separate operation but rather just create a function to your component and that's it in this video you will learn the basics of server actions which include how to define them and create multiple endpoints per page by just defining simple functions we will also take a look on how cassing works and what revalidate that and revalidate tag means lastly we will learn how to automatically fetch new data when it's available and all this is done using only server components through and all this we will create a simple to-do list application where you can add to those and the application will list let's start by creating a fresh next test Apple case and then let's open it up in vs code like this and this will be our to-do list application but before we jump into this let's do one more setup thing and that is let's go to the GitHub and you can open up this repository from GitHub it's a simple Json API that we can use as a backend for our to-do list application in this example so to use this you can click over here and click SSH and copy the git URL for this and let's go back to our terminal and clone the repository so I'm going to type in git clone and then paste in the URL and hit enter and once that's run let's go to that API directory so CD Json API and let's install the dependencies over here so your install and once that's run we want to type in yarn build and then yarn start like this so we can see that our API is now running in localhost 3001. so what this is is just a basic nexjs application that exposes a to-do list API for us to use as our to-do list application backend so if we go to the localhost 3001 in our browser we can see that this is a mock data API you can see information about different endpoints that this has so for example we can get all the to-do's by going to API slash to do slash list and it will return some Json data for the to-do's so this is something we will use in our application but for now it's enough that it's running in the background in the 3001 Port so make sure it's running on the localhost and 3001 Port okay we will come back to that later so let's open up vs code so this is our fresh nexjs application so what I'm going to do next is add a to-do page that will be our to-do list application so I'm going to open up the SRC and app folder and create a new folder inside of that called to do and inside of that I will place a page file like this and then add some boilerplate code for our page like this so what we have here is a form for inputting the new to-do so we just have an input named name so to do name and then we have a submit button and below that we have a list of the to do items and currently it's just hard-coded values over here so let's save this and fire up our Dev server and see what this looks like in the browser so now our Dev server is running so I will switch to the browser and go to the localhost 3000 this time so let's refresh the page so we get the next CS application front page but what we did was add the to-do to the slash to do route so let's go there and over here we can see our form so we have the input the submit button and the list of to-do's so the first thing we want to do here is actually fetch these to-do's from the API so this API over here that we set up earlier so we want to get them from the slash API slash to do slash list so what I'm going to actually do is copy this URL from here and switch back to my next.js application and what I'm going to do here is just a function that fetches the to-do so let's do that so let's call it get to do and inside of here I'm going to use fetch to fetch our to-do's like this so we are fetching them from the API and make sure this address is the same as your address is where you are running the API so you can check it from the terminal where you started the Json API so right here we can see it's the localhost 3001. so now that we have the get to do function ready the only thing left to do is actually call this function and then display the to-do's down here so let's call the function first like this so now we have access to the to do's and we can display them in the list down here so let's add the code for that like this so we are displaying the to do name and putting the ID as a key for the list item and how I know that these are the properties that we want to access well we can check the browser and see what the API returns so it returns ID name and is done okay so now that this is finished let's save this and check the browser okay so looks like the fits is working because these to do items are from the API so next what we want to do is actually add new to-do's so whenever we type in something for the input field so whenever we click the add to do button we want to take that to do and send it to the API so let's do that next and for this we will use server accents so server actions are basically functions that you can Define in your code and they will create an endpoint automatically and you can use them in your server components so let's see how to do that so I'm going to start by defining my server action I will Define it over here so it's just a normal async function so let's do that like this and to make this a server accent we are going to type in use server up here like this so This lets next test know that this is a server action and should only be run on the server and what we want to do here is post to do to API whenever this is fired so how can we invoke this well we can do it by passing in a parameter for this form element called action and that equals the add to do like this so whenever this form is submitted this action will be called and this will actually get a form data object as a parameter so let's add that like this so next let's add the code for sending the new to do to the API so if we check out the browser again and check the API documentation we can see that we can post new to-do's to the API by making a post request to the slash API slash to do slash add and adding the name as a parameter for that request so let's do that so first I'm going to convert this form data object to a normal object which will have key values of the form values down here so let me add that code for it so we are just defining new object and then looping through the keys and values of the form data and storing them in that data so now now this data object will basically have a name property that is the value of this name input all right now that we have our data what we want to do next is submit that data to the API so let me add the code for that and let's go through it together like this so we are using the fits again and we are posting it to the API to that API slash to do slash add path and using the post method and Azure body we are stringifying the data so our name data will be passed in here so now if we save this and switch back to the browser we can see that we are getting an error saying that the server actions is still experimental so at the time of recording this they are still experimental so we need to actually add a feature flag in our next test config so let's do that so I'm going to open up my next config.js and add the following code over here like this so we are passing server access through for the experimental property so let's save this and for this we need to reboot our server so let's do that so now that the server is back on let's switch back to the browser and refresh the page okay so let's try to add a new to do and click add to do all right it made a request we can see it from the dev tools and the payload had the name for it and it returned 200 so everything is okay so looks like the to-do was added but it didn't appear here yet so let's try to refresh the page it still doesn't appear here so let's check the actual API from our browser and see if that to-do was added so I'm gonna open up the oglehost 3001 and go to the API to do list and look over here and looks like our to-do was added so it's this one over here but for some reason it's not displaying it in here even though we are refreshing the page and this is because next.js is by default caching the fetch requests so if we look at the Vets request of our to-do's down here the get to Do's we have couple of options the first option is to pass in a prop for our threats request called cache and setting it no store like this so what this will do is it will tell next.js to not cast this request and every time this is called it will hit the API and not the cache so let's try it so I'm gonna save this and switch back to the browser and now if we refresh the page we can see that our to-do appears over here so that's one way but let's see what happens if we add another to do over here so I'm going to create to do two like this and click add to do looks like it adds the to-do we have get 200 it is also added over here if we take the API it's added to the API but still it doesn't display it in our to-do items list until we refresh the page like this then it appears so now we are getting the fresh to Do's every time we are refreshing the page but this isn't what we want what we want is to have the to do appear over here whenever we add it to the API and to do that we can use something called re-validate that or revalidate tag so let's see how to use those so I'm gonna switch to the vs code and I'm actually going to remove this parameter that we just added because we want to use the cache sometimes and next for the add to do server action after we have posted the to do to the API what we want to do is call revalidate Path like this and as a parameter we want to pass the path we want to revalidate and that is at this case slash to do so our to-do page and then we still need to import that function so let's do that like this so we are importing the revalidate path from next cache so now whenever the to-do is added to the API over here we are calling the revalidate pad which basically tells next yes that there is new to-do's that should be fetched so let's save this and try it out so I'm going to switch back to the browser and now it's actually just showing the first three projects because it's showing the First cast version of the fetch request so now if we add a need to do it should call the revalidate path and all the to do should appear down there so I'm going to add to do three click add to do and the to-do's appear here what about if I add another one like this you can see that it is added and automatically this list is updated this is pretty cool because we can do all this with just a server component so we are not using client components over here at all so we are getting all this functionality with just server components so the other way to revalidate that I mentioned was the revalidate tag so let's see how that works too so instead of calling the revalidate that I'm gonna import a function called revalidate tag like this and now over here I'm gonna call that and as a parameter I'm going to pass in a tag and this is something that I'm defining so for this example I could say it's to do items like this for example and in order for this to work we also need to tell this fits that we are tagging this result with the to do items tag so basically the result of this fetch request will be tagged with to do items in the next test cache so we can then just revalidate the tag to do items and next.js will automatically refetch these items so how to define that tag well let's pass in an object as a parameter for that Fetch and we want to give it a property next and that equals an object which has a property called Tags and we can Define multiple tags with an array and for this we just want to add to do items like this let's save it switch back to the browser and let's try to add new to do over here let's say five add to do and looks like it's working that's great so now we are always revalidating the tech to do items whenever we are adding a new to do but a good practice for this is actually add revalidate property also and this tells Nick JS how long this cache should be valid so after how many seconds we should revalidate this cache now let's say we want to revalidate it in one hour for example so this is just a good practice to edit over here so just in case there is some problem with revalidating it will at least every hour revalidate that cache but what's the difference between these two the revalidate tag and revalidate path well with the tag you can tag certain requests for the cache and just revalidate some of them but with this revalidate path you will always revalidate the whole pack since the server action code is run on the server you are not just limited on using these rest API calls in them but you can for example access a database directly in here virtual has the key value storage that is one of the easiest and fastest ways to add database to your next year's application so click the video on the screen to learn how to set up the virtual key value store inside your own next test application

Channel: Tuomo Kankaanpää

Views: 7,737

Keywords: next.js, nextjs, next js, next.js 13, next.js tutorial, james q quick, web dev simplified, fireship, fireship io, tuomo kankaanpaa, josh tried coding, josh tried coding nextjs, next js tutorial, nextjs tutorial, server actions, next js server actions, next js vs react, caching, revalidate, revalidatepath, revalidatetag, webdev, web development

Id: O9NX6r7wZEY

Length: 16min 10sec (970 seconds)

Published: Mon Sep 11 2023