Fetching with Next.js 14 — Course part 15

you probably want to fetch some data into your application even if you are on the client side or on the server side in this video I'm going to show you how to fetch data in many ways right now I got a slost slid root and I'm catching here the parameter which is one and I got on my API side actually a list of posts that would be return actually directly from a list that we got in here so let's start with the server side what I'm going to do here is to create a function that I'm going to call directly uh actually inside my post here my function post ID in here so we're going to see the difference here I can declare for instance a function called get post by ID let's say okay and it's going to be an asynchronous function and this function here is going to call my own API so here what I'm going to do I'm going to type con response and here it's an asynchronous function so I got to put in a weight and I can use fetch so at this uh step of the course I'm going to explain to you that here fetch is available on the server side okay so in Fetch I can pass a lot of parameters the first parameter of course it's going to be the URL and then after I can pass the header the method etc etc okay so we got get post by ID and here I would like to pass my post ID which would be a string all right so here I'm going to call slash API slost and in here I got the to put actually this pass as a dynamic root and inside here so here I made a mistake I'm going to add the parenthesis again there we go in here I'm going to pass the post ID that we got in here so the method of this call is going to be a get so if I come back here I get a get so I'm going to put method and here I got get and there we go so now that I got my response what I can do is to return actually this response as a Json all right so you're going to tell me thank you very much G for this quick EXP explation about this function but what should I do with it okay yeah of course you got to call this function otherwise you will never be able to retrieve the post so here I'm going to type post and in here I got access of course to the function because I'm in the same scope I'm on the same file so remember I got my params params ID which is coming from here and what I need to do in here is to await for what for get post by ID and in here I got to pass the parameter of the current ID which is param ID in my root all right but look at this here I got an weight and my function here is not an asynchronous function so what I need to do is to put this function asynchronous we see that we got an error and if I come back in here into my code that I've just written here I got a pass but this pass it's not a compl pass okay here I I assume that locally I can fetch my API but it's not the case at this step the API is not available here what I need to put here is the HTTP and here my Local Host 3,000 to get access to my API all right so it's a common mistake you think that you can call your API this way when you are on the server side but it's not possible so I'm going to come back and here we we see that I don't get any error so as a frontend developer what you would do is to open your console and look at uh uh the console log we have in here but actually it's render on the server side so basically what's happening in here is that I have to open my console inside vs code and what we have here is an empty object of course because if I look to my list on the API in here I don't get any post with number one so what I'm going to do I'm just going to put post number 12 and here we see that I got my answer I got my post down there that I can return so basically here if I come back to my front here what I'm supposed to have is a deconstruct object with post and I got my post in here so what I can do is coming back in here I got a title I got a description so let's say that I'm going to build a little bit this uh uh post so post. tile and down there I'm going to put a post. description in here okay so when I come back I got my hello and my amazing post so this was on the server side when I use the server side function up there outside of my function that I export into my uh file my TSX file I can call my function get post by ID directly here with the params catched okay so now let's try to use it as a client okay as a client component we suddenly see that a weight is not supported by a client component only server component can use async await so here we see that there is a main difference between client component and server component so if we come back here on the top I got my use client with my get post ID and I'm calling this asnc a weight here function that I got so if I want to do it on the client side what I need to do is to remove this aing but suddenly I don't get any AWA so what should I do what should I do is to drag and drop this function get post ID get post by ID directly in here so here I can't await actually this function to be processed at step and even if I try to move this function inside my client component in here and I try to come back and I try to upload I still got an error so how can I do this or can I recreate this function get post by ID that I can call directly into my uh uh into my post ID in here well what I would do is basically and here I think I can just command this what I would do here for instance is to create a post and an set post and I would use my state okay and in my state by default okay I would put a n so here what I would have probably if I would like is to create a type post actually type post is equal there we go and here with a title that would be a string and let's say that this title would not be um mandatory and here a description so what I would do down there is to put my state post or null and there we go so here as a condition I would put post and post title and exactly the same in here here I I made it by purpose to put two post like this I could do it better but it's just to show you how we could do okay so we got our post which is empty so I don't render anything in here so how would I write this function on the client side I would write it slightly differently from the server side what I would do at first is to rewrite it directly in here so I would create a asynchronous function that I would call like this and in here and I'm going to zoom a little bit for that I'm going to write a TR catch okay so if I would have an error I would console log my error what we want to do here is to use the params and to set our post if we got a response so I can bring back this piece of code up here and let's say that if I got a response I want to just to start for this course conso log my response all right that's great but at this step I never call my get post by ID so what a lot of people would do directly is to use effect here and this may be here the best solution to call my function so I'm going to just use get POS by ID and as an empty array here I would say that actually when I put this empty array it means that I want to trigger this function when the component is rendered when it's ready okay but I forgot something in here I still got my post by ID but post by ID doesn't exist so what I need to do is to use the params ID okay so we got our function it's supposed to be triggered in here and if there is a respon we want to console log the response so I'm going to come back in here I'm just going to remove this all right so I got this response in here but I can't do anything with that I'm going to come back in here and I want to turn it I want to turn it actually into a Json so I'm going to type here await and here I want to console log my data so I'm going to type data and there we go and when I come back I got my post that is available in here and what I can do is actually to deconstruct here with the with the post so I can remove that and suddenly what I can do is to set my post so what I'm going to do I'm going to say if post and here I'm going to say set post of post and suddenly I got my hello amazing post and this is it so when I got the response I turn the response into a Json and if there is a post I set my post so we've got our function here on the client side the which is actually slightly longer uh than on the server side but it's done on the client side on a client component a lot of you would ask what should we do while we wait on the client side to get the answer from the API because here we see that we've got a bit of timing in here if you are on the server side you can create in here a loading. TS6 a loading page okay and here you can put your loading elements such as skeleton or whatever and on the client side what I suggest you to do and that's what I do most of the time is to put a loading State okay so let's say that our loading state would be on false and down there instead of having this I would have a div with my loading element then I would have another div with the post and here I would display this only so only if I'm on load loing okay and down there I would display this only if I'm not on loading and in here I would check for my loading element the only thing that I need to do is to come back here and to put my set loading on true here for instance and after my my catch down there I would put a finally to say that every time you finish to do your operation you set loading on false I just put a debugger after my call to show you the loading state because here it's really fast because I'm calling my API locally what I can do is to try to reload and here we see that I got my loading element just in here you could do for instance a skeleton a gray skeleton uh showing the UI waiting for the actually the data to be completed let's come back on the server side and let's talk about revalidating the data why because with next GS you can revalidate which means refetch again the data at a certain interval why would we do this remember here on the server side we generate directly the page that we want when we go to slost slid but the problem is that probably the data would change while we are on the page and we would like to revalidate so what we can pass here as a parameter we can pass a parameter next which gives us informations actually to the next uh state of this request we want to do something with it and here we can use what we call revalidate there are two ways to revalidate um you can say that it's going to be manual or automatic so automatic it's with the milliseconds let's say that every uh five milliseconds I want to revalidate the data so it's going to update again uh the page data based on this one okay or otherwise you can use it manually we saw different way to fetch data inside a nextjs application either it's going to be on a client component so it's going to be inside our function and we would have to work on setting a use state or a loading State inside of it if we want to make a clean front end application otherwise if if it's on the server component you can do it outside your post ID create your function and you can fetch the data directly after that inside the function rendering the page or the component if you want to revalidate the data because here the data here fetched is going to be fetched one time you can revalidate and clear the cache of next GS by using the next revalidate it would revalidate your data inside your page rendered

Channel: Codewithguillaume

Views: 23,400

Keywords: course, free, code, javascript, startup, dev, nextjs 13, fetch

Id: uR67O6sNjbg

Length: 14min 19sec (859 seconds)

Published: Fri Oct 06 2023