Next.js Tutorial - Part 2 | Data Fetching with getInitialProps

hello YouTube welcome to the second part of our next jazz tutorial if you remember last week we talked about routing this week we are going to talk about data fetching and for them I already created this mock server with some vehicles owners and details for us to use jumping into code we can see that these owners is the data we are using at the moment completely hard-coded right so let's start by deleting that one and replacing this bit by a snippet that you may be familiar in react so you state use effect and using fetch to fetch data from the server and instead of fat you can use axe use or super agent it will just work okay you can also use SWR and i will leave a link in the description to a video in the channel about SWR that will make this leap but much simpler but moving forward and going to our browser you may see that now we will have five elements there so you probably are thinking well it worked we did server-side rendering right well not quite what happened was that our browser did the fetch and showed that but what we received from our server side is just an empty page we didn't do the HTTP call in the server side and why that happened well use effect will not run in server side in XJS because next is renders the page one time and sends it immediately to our browser and use effect will run in the next time frame so it's gone this code will not even run in server-side the iolite that code is not even running server-side so in order for us to solve there luckily next yes developers created something called get initial props and that get initial props works the following way we pass get initial probes equals to a function okay and whatever we return in this function let's say that we return owners lists okay and in this owners list we have owner named Bruno for example okay so whatever we return here it will be passed as a property in our component here so we can have owners list and now we can pass owners list over here we can comment these cows because we don't need that anymore okay and because we are passing owners list here we are receiving honors list over there it will just work even though we are not doing the H typical but we have that over there going to the inspect we can see that our server rendered already with that details so now what we need to do is make this one I think okay and we can even copy this code over here okay we copy we remove that bit so we don't need and we can use these owners list and pass it over there and because this is an async function what next Jas is doing is checking that you have get initial props it checks that it receives a promise it waits for that promise to be resolved when that promise is resolved it picks whatever we are returning here passes it as properties to our component our component renders want next we has picks the HTML and sends to our client so going back here now and refreshing okay we should see that in our list we also have everything server-side rendered so that's exactly what we were looking for in the first place right but when we click here now and we go to the second page well we need to probably do something really similar to this page let's do it let's do it let's just copy this bit okay just to make it easier for us and faster we can come here and do copy of them and copy person and now our person will also receive an owner's list okay and just to prove you that let me just do this return pre of Jason dot stringify okay let's who poops not persons list but owners list and probably we should change this name in the future but for the demo is probably good enough so effing DS owners list and going back literally the second page will look the same as our first page right so yeah it looks now exactly the same but that's not what we want we want now to filter by for example the second name okay or the car let's go by the name first and then we will let car in a second so if we jump to my Mach server the way that my Mach server filters things is we pass the property we want and then we pass what we want to filter so let's do exactly this in our code and we will come here and we will do owner name oops to be capitalized equals to and now you are asking well but how can I get dead router over there because the router is in a different function well luckily next yes provides us with a context okay and this context one of the things inside context is a query okay so we can do context that query or if you prefer we can do like that whatever you prefer both work so let's copy this query and the query dot person if you didn't watch the video from last week this person name is coming directly from this file name over here so that thing means that we have a dynamic route with a dynamic parameter and I'm using that dynamic parameter over there okay so let's go back to our browser and if we go to our application and we do enter I should now see only two and yes I'm seeing only two okay so the next thing is we can also filter by the vehicle so we can do plus and vehicle equals to really dot vehicle okay and now going back to our browser we should only see one after we refresh we should see only one because we are filtering by the vehicle and the person's name so we can grab details okay let's do that let's or let's just keep it as string if I now let's let's do that okay so let's do owners okay so owners list let's grab the first one and put details so now what we care about is only the details okay so some detail about Bruno's car if we go back and we navigate for example Ellen's mask we have some detail about Ellen mask so everything seems to be working so before we wrap it up there are some things that I showed you should warn you about before you just move on and start to do this a lot so the first thing is let's say that our server instead of replying in 100 milliseconds it will reply in 3 seconds for example let me just kill my mock server ok so let me just kill the mock server and restart it and now every single call will take at least three seconds to run so oops where is my browser is over here ok and going back you will see that we are not going back until our HTTP call is not finished ok clicking again the HTTP call was performed is pending when that pending moves to a 200 Dan yes we navigate if you are ok with this behavior you can close the video you are good to go and that's it if you care about that behavior and that behavior is not what you want and you want to navigate directly and only after you navigate to perform the HTTP call then next J s provides inside the context a thing called request and response so let me do these get initial probes and in the get initial probes we have the context ok and this is the CTX that we are using and the two properties we can use this rack and rest from requests and response and they will only be available server time so if we are running in the client those two will become undefined I guess right so we can come here and use that one and say something on these lines if context dot request for example oops if it's not defined okay we can just do return owners list of empty ok and we just do that ok so oops I need to pass an object ok one more type Oh Bruno and now it should be fine right so now we are returning just an empty list so what will happen is if we are in client side instead of is accusing the codes and the call before we navigate to the next page we just navigate and then we can use a similar code to what we had before with the you state use effect and fetch in order to fetch in client-side so before we do that let's just move to our browser go back and check that from the list to the details now we can just navigate quite fast okay so we just navigated quite fast it will fail because we don't have a zero and so it will fail it's fine for now so what we can do we can do exactly what we were doing in the list and thank God we didn't delete the comma so we can just copy place that one right and now I'm comment let's just uncomment that one okay and we can say that the initial thing will be this one okay and now what we can do is the same thing we have over there so let's just copy this one the only difference is that this time let me just copy this first and then I will talk okay so the only difference is that now we need to put router dot query and router dot query okay and we can do the opposite validation over here which is if whoops if the owners list the owners list is already defined okay or at least if the length the length of the owners list is bigger than zero for example we just return or we do the opposite if it's equals to zero we execute okay one of the two so it doesn't matter which one you do you just if the list is empty you execute the H typical if the list is already provided to you you just don't do the HTTP call and that's perfect I will say so going back to our browser let's see what's happening here it's still the same error because we didn't do anything about this one so we can do this one and oops over there like that because next yes already supports that out of the box even though we are not using typescript the bubble plugins already support them okay so we can just refresh and everything should just work now and we need to import you state because we are not important you state good job Bruno so use state and use effect from react okay now we should be good to go going back okay and clicking there okay we have something at least is not exploding okay let me just confirm something and oops we should be using owners here and not owners list so now yes now everything should be fine let me just test everything again and this one should just work as expected right but going back will take the 3 seconds because our mocks are very still on the 3 seconds but clicking on this one initially it shows nothing but after the 3 seconds we now have them we can even start with things like oh if for example if owners of 0 is not defined okay return div loading for example we can even start to do things like that but it's not for this data fetching tutorial so we can have things like that right and that's literally everything you need to know in order to play with next is you can see that the loading disappears and now we have them so next week we will start to play a bit with typescript moving all these applications to typescript after that I will show you how to do API calls inside next yes because at the moment I'm using my mock server ok this one in localhost 4001 but next year's itself can be used as an IP I okay so we can have API endpoints being provided from next yes we will do that and after those two we will do a full example where we merge everything we are learning so we will use the basic routing we already learned we will use these HTTP calls and in that last one I will also show you a bit more detail about the routing and some methods that exist in the routing we can call through codes okay so if you are enjoying this series please subscribe to the channel to receive the next notifications like the video if you liked it and I hope to see you next week bye bye

Channel: Bruno Antunes

Views: 41,213

Keywords: javascript, react, next.js, ReactJS, ReactJS Tutorial, ReactJS Tutorial for Beginners, Next.js Tutorial, Nextjs Tutorial, Nextjs for beginners, React next, React Next.js, React nextjs, react next js, server side rendering, ssr, react server-side rendering, react ssr, next ssr, javascript tutorial for beginners, javascript for beginners, react fetch, next.js fetch data, react next http call, next.js http call, next.js get data from server, nextjs http get, nextjs getInitialProps

Id: Os3JZc2CtwY

Length: 14min 20sec (860 seconds)

Published: Mon Feb 24 2020

Reddit Comments

[u/bmvantunes]

Part 1 of the tutorial about Next.js Router -> https://youtu.be/7J4iL1HDshQ

[u/bmvantunes]

Part 3 of the tutorial about TypeScript Migration is now available: https://www.youtube.com/watch?v=v3lI29trIN8