Nextjs Tutorial #1 - SSR Basics

hello welcome everyone to my next chess serious tutorial in this tutorial we're gonna build a small Nexus app and I want to show you in this video the basics of next chess first of all let's have a look at the next year's webpage so this is next year's website and currently the most recent version is 9.4 which comes with a lot of good features and before start I want to mention that I'm not going to explain the basics of react and basics of ACMA script 6 in this tutorial because here I just want to focus on the next rest framework only and the reason why you pick next is probably the server-side rendering of react application by the way you also in recent version of next I think from the 9 you can use next as a static site generator so before we continue I want to show the project the final project that we will build in the Z's in these tutorials this is the github repos and name it github repos and integrated here the github API so here we can show any github repo you can also filter the language here for example let's pick typescript then you can see list of all all github reports that has somewhere in the description on the named react port and also its main languages type script then you can click on the Reaper and see more detailed information then you can have the button here view on github and if you click here it opens just the key hub page of this report the project is really small and can be I think finished in 30 minutes with the design I you boom a CSS and sass at the github API I use instead of a back-end and then I just deployed to the now SH or hosting provider for the next years which is now I think named versal they just made a rebranding recently and there's one thing I want to show you it's the survey called state of JavaScript it carbons your lame I really liked it and I also read it every year this is the most fresh one from 2019 and here if we go to the backend frameworks we can see the next rows here and it really has good satisfaction and interest rate is 91% is in 2019 so it means it's a popular advanced and a good framework and it's nice to burn I have here the default generated started template for an XS it's pretty small but I advise you to code along with me so to have this project here to generate this you can just go to the documentation here to the docs and we can see here a comment which is yarn create next up if you use NPM you also can go for it it's no problem just use a pen nib next step then you need to choose a default starters in play if you do this you have exactly this project so let's start let's start with some cleanup here first of all I advise you to do with the API folder we don't need this now then go to the index dress select everything and also remove then let's let's create our first page and our first page will be the index page i will use everywhere our function components here so no class best components and I also use hooks in very small use cases so let's create here the first page is heading hello from next dress and some description let's make it some description so to see this what we need to do we need to start our application and to start our application we have in the package.json here the three main scripts and three dependencies you don't need to use the starter template you can also just create empty and p.m. application put next Jace here reactant dragged on then use the next rest with these three scripts the - scripts is the most used script for development of course it would be use in 90% of the cases just to local development it starts the next in developer mode so it's next step the built-ins start it usually happens on the server when you build application you start for hosting so to see our page here what we need to do we need to make yarn def then it starts on the localhost 4000 let's open this it's also close this one and this I should see our page here so make it a bit bigger now we can see our next chess page which is the first page and it's great before we continue I advise to to create first of all there SRC folder and we put everything in this so that's the server and I will talk about the main thinking advantage of next rest is the routing which is the page based routing it means that if I access the index it's usually just default page which is the index page but I can create more pages by just sorry by just creating another page about and let's first create a bad page which is just simple static page about page to see this it's very easy I'm just on the server I just need to go to the slash about it means the name of the page is routing just a really cool feature of next yes I just put slash about and I'm on the page you can also make nested routing to do this you can create folder and the folder another page and that will be like a nesting routing and I will show it also a bit later so let's move our pages to the SOC and also an SRC folder let's create another folder that is components here we will make the components so for example I want to build an nav bar which is shared and every page and what I advise to do in such case you can create create a component which will be a nav bar component and that number component will have something like links let's make a ul and inside URL we have to list items and in every leaf item we'll have I think there a tag with the home and also another a tech whiz about about page and here the link will be just homepage yeah and now we can use this component but I want this component to be on every page so they shared the first thing that I can do I can of course to every page at the Napper here but there is also one thing from the next it allows you to build the persistently outlet on every page and if I go to the documentation we can find this as a app custom app it looks like this and this is a wrapper for every page so as we can see what we can do here we can add the global CSS here we can keep the state when navigating the pages and persist layout between the page so let's just copy this and create here underscore AB dot chess also export mine what we can do here let's create the main deep and inside this band if we will have a component and we also have our navbar here oops yep bit wrong null texture should work and if we see what happens here let's afresh oh this page can be found I think that because of the moving on the folder let's just restart and refresh yeah when you use and when I'm on the folder Sebastian is first on the server because nurses don't understand that the page is removed yeah as we can see now we have our component here just the navbar component and then an about page and we can go to the home and you can go to about so you can navigate and if you open the markup and also that is the component extension of the react we can see that this is my app which is exactly the my up here that we created and the navbar is the reduced one and then we have index it's this component which actually the page if I go to the about I will see the same structure but here I will see the about page it's a nice thing to make some really share layouts it's very good ok that's we understand but the only thing that we did here wrong is how we navigate between the pages this is wrong because it's not client side navigation it's fully reload of the application and that something that we don't want to do I will show you when I click here on the home you see you will notice that the Refresh is coming so it's the fully refresh of the application like I'm pressing this and this is non desired behavior to fix this you need to use their link from the next so I need to import the link from the next which is next slash link and if I use this component I just wrap this into my link and here for the about link I will do exactly the same yeah now we can see that it will change the behavior okay this is because I should remove HRF from the a from the anchor to the link component now it should be fixed we can notice now if I click you will not see the refresh of the application it means the navigation now happening on the client side and the state of application persists which is the client side look and feel exactly the behavior that react is doing with react router this is a good replacement for act router and I found it very easy and nice to use the link and page based routing from the next steps okay so now let's speak about the server side which is the most important feature of the next just how we can make this page to the render server side actually now it's the stack because next rest is using this automatic this decision which may which page to make static which page to make server-side rendering and we can see here the sign it says page is pre rendered and the page is printed because it has no server-side code it just has the static page setting HTML so we can just parameter the page and never again but if we had the special function which is called get static props before this function was called to get initial props in the previous versions of Nexus but the current one gives you the function name of get static props and what we can do we can create here a function against Eric props it's an icing function because here you can just make any icing course on the server side and here we can return the data as a props so for example red let's return the value some value I'm sorry you need to return the props and value of one how to read this data you have it from the props so here you get the props and show the value somewhere here props that value you can see the one now it's a fresh yeah and we can see the one now here and what is very important that this court always is executed on the server what does it mean it means if we can hear something like console.log type of window we should see the lock if we refresh you don't see the lock here because it happens on the server side only and we see the lock here which means the type of window is an affiant it means this happens on the server and this is one of the main and the best checks if the code is running on client side on the server side if we for example go to that about let me go to the home we still don't see anything in the console on the client side because it this code is always executed Sara always what is also interesting if we put this console.log to the component and let's remove from here you'll see that when i refresh the page I see that is happened on the service on this client side but if we go here I also see that it's happened on the server side also so it happens both and the server side and the client side it's because the next is after rendering the component first time it dehydrates it so it moves this states to the client side and if we go to the about and we go back to the home we see it again happened on the client side but it also happened on the server side and that's how that actually works so this actually happens also on the server side and the client side but this function is always executed on the server but how next actually injects this to the page you can find it if we go to the network and for example refresh the page you can see that you downloaded the page which is our page it's completely render it from the server if you found here and response and search for one maybe the one is not the best think let's put the value some string test for example and refresh and that's fine here the test we see it's in the markup but if we search once again we can see that this is also in the page but where we can go to the page resource and find that here together with the page next shells is injecting this script which is just the chase on actually and this Jason is all props so it means this is available on the client side because it was also passed as this object together with a markup so our react application can also have this and use it on the client side now let's use just an example of some calls and I advise you to try Chuck Norris joke API which is the most popular for such cases but to make a request let's stop our server and install actions for making issues because yeah while this happening so this is the endpoint we can copy this and try into the browser it gets us every time the random joke here in the value or a random quote so let's use this go to our project and let's make this call on the first on the client oh sorry on the server side so on the get static props let's make this call we will use EXO's for this and make the joke call then here let's use joke data dead value so we get just just a joke just a string let's start the server again is your nerve so now here we will have the value from the server-side server-side let's see exercise on to find this because yeah I just forgot to add access let's bring it here and very fast ok yeah so here we see the random joke and if we refresh every time I make requests to the server every time there cross the page this get static props is executed and I have random joke and this is inserted as props for this component so when i refresh every time I see the new joke what will happen if I do exactly the same thing but on the client sites so here not in the garrix type static props function what I can do here I will use hooks because I'm using function components I will use react hooks for the component need mount and something like that so I will need two hooks it's you state cook and use a pack and I will use state first of all use state of choke set choke and the initial status of the string and then I will use use effect and the effect will be killed joke a function that we open implement a bit earlier so I don't need I don't need any cleanup and if you have here an empty array it means it's the replacement of the component it mounts so it will be executed after the component is loaded the last thing we need to implement the get choked function which is the icing function sorry and let's copy this code because we will do exactly the same thing to compare how behaves on the client side and on the background and then we make such joke here the rest data depth value let me have here this joke as soon as component is loaded let's also display it before as the value from client-side rendering yep from the joke now we can compare the difference now we have two jokes it should be different actually that's the fresh yeah we have two different jokes one from the client side and one other from the server side and now I will refresh the page and you'll see the difference between them because this comes exactly with the page it will be instantly here but here it will take like one second to make the request because this happens after the page is loaded it already and I will see here that this is has a blinking effect because it happens on the client side yeah this is a this is because it happens after the component get loaded and this is the big difference between Garrick static get static props and making the request on the client-side what else is different that you will not see the requests in the network if you do hear choke you see this is a request from client side and response so if you make some Secours requests like you have a token the future in the future will have a token for the github API it's really secure to put it on the clients on the server side because we will not see the requests here so we will not see the token it happens on the server so no one can steal our token so I think for now that's all in the next series we will continue building our application that I showed you and in the next part we will integrate the github API and start searching for some repos so thank you very much for watching this I hope you enjoy it so please also have a like and subscribe of course and continue watching

Channel: Waldev

Views: 10,223

Keywords: nextjs, javascript, ssr, server side rendering, react

Id: LbmW2OKIOWU

Length: 24min 47sec (1487 seconds)

Published: Mon May 18 2020