#20: Data Fetching with React Server Components🔥Build a Fun API App in Next.js

Hello, what's up guys? Today in this video we will see data fetching in next application. Believe me, today's video is going to be one of the most important video in the next application. Because how can we fetch data through API? So today we are going to make that completely clear in this video. And I am also going to share a mini project with you today in this video. You can see, something is appearing to you like this. Where we will see this, basically there is an API which tells you that whatever name you give, on that basis it will tell whether it is a boy's name or a girl's name. And the probability also tells what percentage it can be a boy's name. So this is a very osm API. Today, I will show you this project by creating these server components through the Next application. Keep one thing in mind that the server component is different, the client component is different. So data fetching today we're going to look at in our server component. So you can see data fetching in this way. Today we will do it through API but please wait a little further. Then we will fetch the data through the actual database. And believe me it is very easy. And I would like to tell you one more thing. Listen carefully. And that is, those of you who have not seen this video yet, I am writing it down, guys this is the most important video in the world of Nexs because you would have never heard of react server component client component, so that is an extra feature in nexjs where now you can directly do back end database work in the server component, yes guys next js is a full stack application in itself where you do not need nd express, you can write everything here with the help of next, so that is your sub component, client component, normal, whatever you used to do in react and in this I have also shown you data fetching, very basic json place holder, please do watch this video once, it is going to help you a lot and you will say thank you to me, I am writing it down because this is such a video brother, once you get to know just this much of your life, you should understand that you have understood 50% of the next application because the whole game is running on it, okay Yes, alright and even today we are fetching data in the server component, tomorrow we will see it in the client end component, so you can see how we can do it. Telling you if you want to fetch data in your server component then you can go with the fetch API and you can use an ORM and a database. Now the database will be there only when you create your own database. We haven't created the database yet. So what is it going to be for now? In this way it will be cancelled. What is left with you? These. So today we are going to do this. Ok? And the beauty now is that you can create it very easily. So look at the folder structure, what I'm going to do. I'll go inside Users. Look carefully. I will write data fetch here. Ok? I'll create a guys page dot jsx inside that. So guys what do I do inside data fetch? Sub a component forward slash a page dot JSX So what I did is I created another folder inside data fetch as well. I gave him page dot jsx. So basically data fetch forward slash your this page dot JX will come. Something like this. So whatever work I have, I am going to write it here. Ok ? Whoever you are, make one here like this. For example, in the fat arrow, I'll make it a default data phase. Ok? And I don't need it here. It's just like this I will write a return H1 data fetching. Ok? I am leaving this writing. I'm all inside the component. And let me do one thing here. This is what I do, I copy and paste it inside it. Ok? So now here I will write data fetch server instead of data fetch. Ok? Allright. Now how can I fetch the data here. Look, I'm saying it again. Here I have already told you in this video. In this server component, I told you how you can fetch normal data. So please look at that. What will I do here? I will go a little bit advanced where I will get the data that the user is writing in the URL and on that basis, I will display the API data here. And guys, I would like to show you the API data once. Like I write my name here, Vinod. So if I write humor. Ok ? So pay attention to what output I get. Look Vinod what is a gender? That's the mail. So basically this API is the one which tells you whether the person is male or female based on the name you provide. And the probability is telling, no brother 99% 0.99 means 99% that this is a match. Now Kiran is a name which is used by boys as well as girls. So let's see what it is. Oh my God. See Kiran is basically a name for boys. And what percentage by 0.61% if it is 50-50 it means that Kiran, both boy and girl are equal. But here we at least came to know that the probability of the name Kiran being a boy is a little higher. If there are 100 children, either boy or girl, 61 of them will be boys. The rest remaining will be that girl of yours. So it tells you your gender with probability which is very awesome. So today we will see this in such a way that how you can create it. It is very interesting. It's going to be a lot of fun. And whatever we have read previously till now is going to be used here today. Ok? I told you that we are going to see this next application in a very awesome way. So now let us start it. So I have come inside all the components. I don't need to call a function to fetch data in the end server component. Byte will be the default. This is the beauty of server components. You can do almost all the work of Node Express here. Ok? So look how we used to fetch data. Normally, I used to wait after writing fetch API and whatever data I had, I used to pass it here. And in our case it is something like this. Ok? This is the normal way I walk here. So whatever data comes from this, the cost response will be this, right? And I go here, the cost data will be again, we need to wait because whatever response will be there, I need it in proper format, readable format, like this, console.log, and then I pass the data, if you do only this much, guys, and do one thing here, like this, data.a, whatever is the user's name, not the user's name, do one thing, what is his name, I have given the name here, right? Ok? So much if we do. Ok? This is the data fetch server. Basically what is it inside? Data Fetch and Transfer inside Server Component. Ok? Look carefully. I write data fetch. Ok? Forward Slash Server Component. If I write this and if I inspect it on the console, then look guys, I got the entire data in the object, the same data that I showed you a while ago and one more thing, I am doing the console in the server here, which is never visible in the browser, but the specialty of next is that it is telling you that okay, no, you are going to see the data in the browser anyway, I show the console right there, but this is not the right way because the server is also telling that you are getting the console of the server and the beauty is that here you see the data fetching and you got the name of the user Kiran, which is good and whatever it is, you can see it is mail or Kiran, we can show it here, but in the beginning I saw even here you can see that I wanted it in the card format, so how can I do that and obviously I would like that after all the components, I want to write the name equal to Kiran by putting a query string here in this way, I want someone to write in this way, in this way and on its basis we should know that I I want it to be dynamic, you just understand this, then how can I do that, now look carefully, first of all if someone is filling data in the URL, then how can I get that data, think a little, till now we have read params, read catch all segments, read search params, read use search params, we have read a lot, so out of all these, which one is going to be useful here, basically I need the data of query string, did you think that awesome search for params will be useful here because we are dealing with all the components. If we were to use the client we could use use search params. Well then. what do I need here? Search Paramps. So I can search Poms directly here. And else I will go with props. Ok? I pay here cost search param. Let's do it with Param. What happened? Awet. Look, we have to wait for it here. Basically await is returning a promise. Props dot we have a search params. This is it. Well, my work is done. Now what will I do here? Cost a whatever is the user's name, the username will be equal to whatever my search params are dot in that I am getting the name. Ok? So what did I find out here? User name. Allright. Now here this name which I was giving to myself. Now I want to make it dynamic. So let me do this basically using template literals first. Now whatever the user has typed in the name field, I will add it here and this will become dynamic for me. Just by writing this much code, I have achieved this dynamic, right? And we have read this just a day or two ago. So you are seeing how this works. This is how we are fetching the data. And the beauty is that here I did not even create this function as I mean function. Please call me. So this is the specialty of Sabre component. Allright. So let me do one thing. Look at this, if I refresh this now, what do I see here ? Guys, I have not given you a second name in the data fetching name, so I will do it here, the question mark name will be equal to you, now I will give it to Kiran and I will hit enter. So the moment I thought my work was done. I am getting it equal. Look, I have got all my work done. Now I will not go Kiran. Now I say that I want to know Vinod. Look here the name is Vinod and here it is equal to Vinod, meaning how awesome it is that now you are able to fetch data. We saw a little bit about that too, that we are doing it by getting the data from the URL. So you can do this a little better. And like this is a matter of probability, right? So this is so awesome isn't it? Now here are a few things that you need to keep in mind. Never give the name directly in this manner. Tomorrow it may be possible that no one from Lets may give the name. So you see guys what is happening, still this API call is done and you got null in the value and that means this is not correct, so what can we do here, I will put a simple code for you and I can do something like this, we can do one thing where if the user name is not there, if there is no username, then we will say no name provided please add something like this to the URL, you put the name on your URL in this manner, we will say okay I will go here and boom guys now see how cute it looks. Just did we add one validation? My work is done. Because it is possible that most of the people are clever. Leave the name equal to as it is. So we are telling you brother, you have not given any name. And this question mark that is visible, the name that is equal to your name, write it there. So, that is what we are telling you. Oh, I forgot to write the name. I am sorry. By doing this we will write the name in this manner. Now there can be another problem here. Yes, where even if someone gives just an empty string and I hit enter, look guys, I am still facing that problem. Look, but in this case, I did not need the data. You are understanding, right? So now we have to tackle this as well. But this is a task for you as to how we can tackle this now. I want that if any user defines his route in this manner. Basically, I still want that the error that was there a while ago about 'basically no name provided' should come back. I want you to comment below and tell me how you can do that. And tomorrow when we see the same code, the same functionality and all this in the data fetching client component, then I will tell you how we can tackle this. But this is your task today. Alright then I will go here. Now here's one more thing we need to look at. Let me sort this out. Look, how to get the data from the URL, I saw how to deal with it, that at least it is not null, I saw that, we have made it dynamic, the date is coming, everything is correct, now here the part about probability, again I want to tell you that this is a part of pure JavaScript, where it is showing zero at the moment because I have not given the data, but if I put Kiran here again because Kiran is such a name, which gives the meaning, look, the probability is 0.61, but I want in a percentage, okay, so what will we do, so I will write confidence percentage and here instead of just data, I will do use data, okay, it will look a little good, so it will be like user data here, dot what is yours, it's your probability, right, I guess, for a second, what was that probability, okay, I don't want to do anything for the spelling again, so whatever its probability will be, you have to make it into 100. Then what is the tension? If you do this much, is it okay? So now here you can directly write confidence. Confidence percentage is correct? If I go here, look, you have got 61. Isn't this so awesome? Let me write Ram instead of Kiran. So what is there in Ram? Look guys, in Ram it is being told directly brother it's a Ram male and 97. Although I did not show the mail, I will show it. So I hope you understood how we can fetch the data. How can error handling be done? Yes I have not done error handling in it also. I will tell you when the right time comes. But now you know the method to fetch the data. Right? I have another code I'd like to add just above this. If user data dot gender is equal to equal to male then he/she is male. Yes. So now my entire code is going to be based on that. So guys, now I'm going to do something. Whatever is there after return, I am pasting it here. So you can see guys, I have copied and pasted it. It will seem like too much to you at first glance. But in reality it's all your guy's jsx with a lot of Telwin's classes in it. And yes, I would like to tell you one more thing that you have to import. These are some icons that we need to import. Ok? So what am I doing just a second first ? npm install lucid react whatever this is. Ok? Allright. Ok. Now let me run it. Ok. Now I'm saving this with Control S. Ok? I will go here. And see, your data has arrived. Basically there is nothing here. You see, it is Ram, that is why it is looking like this. If I do Sita then you can see how it will appear to you, I will show you. And boom guys. When you can see, when you add a female, then the background color, look, is a little like this in the background, this part which you are seeing, this is it in the beginning, then whatever rest of the parts you are seeing, its color changes, so here it is only that, here it is only that and nothing else, you are seeing this slight gradient, absolute round full at the top and bottom, right zero here, bottom zero, so this is the same, okay and end here, if you see, this is also the same which I had just shown you. How you know like with the help of tail winds you can do all this. If there is a match then brother show me this type of gradient. If it is a female then show this type of gradient. After that, I don't even need to say user data dot name. ANYONE CAN GET IT EASILY. And I showed you by doing it. Blank user data dot name. Then there's the mail. Again the same thing. In this line, this part which you are seeing, look what we did for it. If it is male then this is female then this is the span tag inside it now if you look inside it. Again, if it is male then add this colour. Otherwise add this color. And this particular code that you are seeing is also important. I do n't know how many of you have understood what we have done here. So guys how many people tell me by commenting and understood what is happening here. This is basic JavaScript. There is nothing like that in it. Basically, whatever I am telling you right now, your HTML Tailwind and basically what to say about HTML, only JSS, Tailwind and JavaScript is being used and nothing else is happening because we have already done the main data fetching work. So basically what we did was, I wanted capitalization here, look, the first character is capitalized, everything else is normal, right? So it's just that, whatever the gender, whatever letter is there on the character at zero index ah, you just upper case it. After that, if you write slash one and leave it, it means you will get all the remaining dates. So that's what you're getting as it is. And we are connecting here. So that's it, there 's such a big code for capitalizing F in female, if you have any other option then let me know in the comment section, what is there after that, confidence percentage, and you can see a line, so you can see the confidence percentage, which we have already calculated, okay, and here you can see, this part, if it's male then show it in blue color, if it's female then show it in this color, and whatever will be its width, according to the confidence percentage, it will keep moving forward and then backward, again I am telling you, it's pure JavaScript, and yes by the way, you will tell you one more thing, you will say that friend promotes his video again and again. What should I do, it happens to me too that people upload the same 12 hour video. Somewhere on other platforms people are buying it. I have uploaded it for free, guys, I posted it after working hard for 12 hours, 12 hours and 5 hours, so please watch the video. So, it becomes fun to work when those people watch them. Isn't it? Like I am doing so much, the more you see it, the more motivation I will get. Yes, I will work harder. But if you don't watch it even after putting in so much hard work then I feel bad. That's why, if you come, you are already seeing it, but if you also share it, I will be very happy. So that is it, if you must have seen it then you say friend why is it telling so much, you have understood what is happening here then you will see guys, the data is sample size, okay, basically it is being talked about and on the basis of how many total samples, it is telling that this pro probability or whether it is a boy or a girl, it is happening on the basis of this only, whatever it is, it is sample chances and accuracy indicator, guys you see this yourself, if I start telling everything then it will become difficult, then you can see here, guys if it is above 90 then it is high accuracy, if it is above 70 or above 70 then it is moderate and if it is below that then it is low accuracy, your data will be visible here. And this is how it works for you. The main thing was how you can get data from the URL which we had already read. And then the data we are fetching is an API. So if you had to add any dynamic data in that API, how could you do that and how would you then fetch that data, that was for us to see today and I showed it to you here. Ok? So ya guys this is it. I know the video went a little long. I didn't want it to go on for that long. What should I do? This is all about JavaScript and Telwin, I have to tell you about it. Ok? That is why I say that whenever you go to learn something, I have already told you about the pre-requisites. So guys, the meaning of prerequisite was that even if I do not explain this part, you should have come on your own. Because whatever data we are getting here and the data with which we are working, we have already fetched it. We have already received that data. And the only work in Next js is how you can get that data. That was all the work of Next js. This much or any other Next JS is not being used here. There is nothing here. Ok ? But anyway, no one. I wanted you to not have any doubt in your mind so I explained it. But as we move forward, guys, I will focus less on TL classes and wherever JavaScript comes, I will tell you to watch the video yourself first. Ok? But that's it for this video today. Now in tomorrow's video I will show you how you can use this in the client component. And if you already know how we can create the same application in client component now. So let me know in the comment section. And guys I will definitely reply to you. You don't remain worried. Ok ? If you haven't checked out the end course yet then please do. And please check out this video on JavaScript once. There is no need to see the full reference. You can see a little bit of what is being used in this video today. And guys, if you like the video then like and share it with your friends. Our next target is 8 lakh crore. Not subscribed yet. Please do it. I will meet you in tomorrow's video. Till then guys thank you so much. Take care. [music]