Learn SSR for NEXT.JS in 10 Minutes (Server Side Rendering for beginners)

yo what's going on guys welcome back to another video today you're going to learn all about server-side rendering in nexus.js if you didn't know what it is don't worry i've got you covered in less than 10 minutes row the intro [Music] before we get started let's talk about today's video sponsor brilliant the amazing team over at brilliant actually built an incredible platform which offers an extensive list of courses covering all the stem modules they've got your science technology engineering and maths down if you ever wanted to go ahead and master any of these areas this is a great place to start so here's a couple of reasons why i personally would recommend using brilliant i personally like to learn through hands-on application hence why we have a lot of clones on this channel you can learn interactively by actually having hands-on experiences inside of the brilliant lessons drag and drop interactive demos to go ahead and learn one of the many concepts that they offer brilliant is amazing for all levels so whether you're a beginner or whether you're advanced they've got you covered you can learn anything whether it's cryptocurrency or computational biology these guys have got a huge range of courses available i specifically love the cryptocurrency module so i wanted to know more about the hashing function how this kind of stuff works and we actually use this in the web 3.0 build the guys over brilliant have hooked us up the first 200 people are going to get 20 off their annual memberships so hurry because that is going to go extremely fast first link in the description make sure you check out brilliant today jumping straight into the lesson we're going to learn about server side rendering in next year when you typically use react without any framework like nexus what happens is the entire bundle gets delivered to the user anytime they come to the website this is okay in the beginning but as your app gets bigger it starts to get slower to actually go ahead and visit the website as the entire bundle will have to go ahead and get loaded when a user visits your website the biggest delay is actually when the javascript loads so what you tend to see is you'll visit a website and you tend to see a spinner or a loading message when the actual javascript is pulling in the data that needs to be on the screen so the problem with this is the ux isn't really great right the user experience is not what we want we want to come to our website and bam it's there it works this is where nextgs comes in introduce a technique called server side rendering what happens here is when a user visits the web page that individual page is going to get built and notice i said the individual page as next yes does page splitting by default so that one page is going to go ahead and get pre-built on a really fast server such as vasel when we deployed to versailles this is how it works the benefit of this is that that high speed server has great internet is very fast and its primary job is to simply go ahead and pre-build this page whereas the browser is not this results in a much faster page being loaded the time to interact on your page is extremely fast and you have a much better user experience so the user comes on to your app and immediately they'll see a web page there's no loading indicator or spinners to be seen this also as a side effect increases your seo performance so when google web crawlers come to your page instead of seeing a loading state they get the entire page at once now yes they can support pwas and they do wait for a little bit but it actually does increase your score when you implement something like server-side rendering without further ado let's jump straight into a build and by the end of this you're going to be able to implement your first server side rendered page so first thing you want to do is type in mpx create next app and then you want to go ahead and give your project a name then what you want to do is cd into that directory so cd ssr demo or whatever you've called it and what i love to do is type in code dot so once you're inside of vs code what you want to do is go over to pages head over to index.js so what we're actually going to go ahead and do is spin up this app so command j opens up our terminal and what you want to do is npm run dev this will go ahead and spin up your website so what i'm now going to do is pull this over onto the right hand side of my screen so as you can see i've got my next.js app loaded so i'm going to give you an example of how we initially would pull data in inside of a traditional react application we're going to have a piece of state that's going to pull in a bunch of to-do's from an external api so we're going to say to-do's to do's equals use state like so and we're going to import use date and we're going to initialize it with an empty array value and then we're going to go ahead and actually fetch some data using a use effect so here you go i've got a usefx snippet we're not going to have any dependency inside of our use effect and we have to make sure that we import it so we've imported use effect and use state from react so in this case i can say fetch to do's equals async and then we're going to go ahead and make an inner function i'm going to type in const res equals await fetch i'm going to go ahead and pull the data in from an external api so i've got this awesome to do's api over here which comes from jsonplaceholder once we've gone and done that i need to go ahead and pass the data so in this case i need to go ahead and wait for the response dot json this will go ahead and give me the data and the list of to-do's i can go ahead and use once we get to this point i actually need to go ahead and set this to do's in my state to the data that we receive back and i need to go ahead and execute this function to make sure that it runs so how do i go ahead and actually display the to do's on the page we simply have a ternary operator which says to do's dot length if the length is equal to zero so it hasn't fetched it to do yet then i'm going to go ahead and say it's got a loading state otherwise what i want to do is actually show the to-do's on the screen in this case i can go ahead and say to dos.map and for every single to do i simply want to go ahead and render out the to-do on the screen so just like so i've got a div where the key is the to-do id and then we've got the p tag with the id and the title so if i hit save now you can see that initially if i refresh the page there's a loading state you can see it very quickly there's a loading sort of glimpse we don't like that loading state right that loading state gets quite irritating and if we want to emphasize this a bit further we can go ahead and actually put in a timer to go ahead and show you the effect that this actually has so if i was to do the same function over in my to-do imagine if i had a slow internet connection example of a three second timeout here if i go ahead and refresh imagine i had a slow internet this is what my user would see three seconds later boom the data would come in that's not ideal right we don't want that user experience for our user and google web scrapers may not stick around for that long that means our seo is going to get damaged as a result so how do we implement server side rendering well it's actually quite simple the first thing i want to do is actually going to go ahead and comment all of this out and we're going to go ahead and actually comment this out for now while we get everything prepared so we're back to our base screen and what you need to do when you want to implement server side rendering is simply go ahead and include a special function called get server-side props if we simply include this function and we export it from our component then the nexus knows to handle this specific page or in this case the home page as a server side rendered page in this case i can go ahead and say export async function get server side props and in this case it's an empty function i'm going to go ahead and actually take my previous code so where i done the fetch i'm going to go ahead and take that and cut it and pop it over here like so i've got the same simple logic i make a fetch to this external api i get the data back i pass it as json how do i get that over to my component so my home component well it's actually very simple whenever we do that server side render what we can actually do is return something called props so if you've used react before you'd be very familiar with props and all of the information that gets pre-rendered on the server is actually available to us as props all we have to do is simply return an object with props inside as a key and then inside of here we can simply put in the data in this case i actually want to rename this and have the key as to do's and i want to go ahead and pass in the data like so inside of our functional component we get props what we can do here is destructure the to-do's out of the props and as you can see this is already a little bit cleaner than what we previously had and now what i can do is i can go ahead uncomment this out and i need to go ahead and protect myself because initially when it tries to build the page to do's may be undefined so in this case where i have to do this i'm going to use optional chaining so that way if it's undefined it will not freak out it'll be a safe way of handling the variable now if i go over to my page so localhost 3000 and i refresh as you can see there was no loading indicator and i'm going to emphasize this again if i refresh look what happens as soon as i come onto the page i get the list of to-do's so as you can see server-side rendering is exactly as i mentioned before it will pre-build the page on the server per request so every time a user comes it builds a fresh page and it will deliver it to the user this is insanely powerful and there are many benefits so faster page loading faster page rendering there's less time to interact right so in which case the user comes to your page they can immediately start interacting with the page they don't have to wait it's better seo performance so google when they come and scrape the site they're going to get immediately all the information available and these are just a handful of tips right there's a lot more benefits as this brings so this has been your introduction to server side rendering in next.js hopefully you can see the massive benefit it has on your app and it makes the user experience way better in my opinion so with that said guys i hope you've enjoyed the video smash the thumbs up button if you had make sure you subscribe if you haven't turn on your notification icon so you don't miss any hidden gems like this in the future and as always guys i will see you in the next video peace [Music]

Channel: Sonny Sangha

Views: 92,854

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: WAMqFdCFotY

Length: 9min 55sec (595 seconds)

Published: Tue Feb 01 2022