Why I Don't Use React JS Anymore! React JS vs Next JS

so that is exactly how nextgs works and is different from a reactions build and that is why next chairs are super fast super easy and super performing hey everyone welcome back my name is mehul and in this video we'll be discussing what exactly next chairs is but more importantly how it exactly works because you would have seen a lot of videos on react nexus what is the difference but let's just go ahead and with the help of this whiteboard get a little bit into the technical details of how in the architectural sense next year's works compared to reactors okay so before we get into next year's let's actually understand how reactions works in order to appreciate what next years does so what reactions does is that on a production website this is a server this is a client and this server could very well be just a cdn right it need not to be a server like ec2 or anything it could be just a cdn as well cdn is just a dumb server which just knows how to present files right it does not know how to compute and stuff i mean it knows telesat and degree but you cannot really run scripts and everything cdns are optimized for file delivery not for compute so this cdn delivers this client a single file on the handshake right index.html now this index.html actually contains inside a source code it contains something known as bundle.js now this file could be named pretty much anything but i think the default name for react is bundle.js and this bundle.js actually contains a lot of javascript code which contains the react runtime which contains what the page should look like in terms of jsx and the components how the routing should work how your pages should be structured should be layout and everything so basically this index.html right here is pretty much blank so it's pretty much a blank document which only contains this bundle.js as a bootstrap point now why do we do this this is required because react is fundamentally a javascript framework right it cannot run without javascript even to construct the layout when you do a return return h1 instead of jsx this actually gets compiled down to react.createelement and that's in tax rate or some modern syntax with js6 right but this technically is still javascript it's not html in order to do that it has to deliver a javascript file to the client and the client has to execute this javascript first so it has to execute this javascript first in order to understand what the page should look like this is how very simply react.js works server right here has very minimal role in terms of speeding up your application right the server right here can only do so much it can just increase or decrease rather the time to first byte that is how soon this server starts responding and you can pretty much max it out by using a cdn here instead of a server right you don't want to use an ec2 instance or a digital ocean droplet here if you're using a static website using react.cs but rather you want a cdn here which is cdn which is placed around the world for it to speed up the delivery and the delivering your static files next chase on the other hand however is a bit interesting and why is that that is because some of the features of next year's actually require you to run a live server now this server in fact could be serverless but it needs a node.js process right so it needs a node.js process and the fact if you're using it with a provider like warsaw which has a first class support for next chase you can actually put a cdn in between as well this is the important part with nexus alongside with the server side rendering as well but we'll discuss that so let's assume you are hosting a website on whatsapp right now you can do it on aws as well using something known as aws serverless nexjs there's a whole full-blown architecture in serverless how you can use aws for that but warsaw is very very simple compared to this setup okay so what is happening here is this is the client and remember what we discussed with reactions is that your bundle.js comes from the server and gets executed and the page is displayed right so what some people thought well what about if we try to execute this react instead of on client on the server and send the initial generated document to the client it seems like a nice idea right i mean on first thought you might understand that this this seems like a valid idea that you just generate the html on the server and send it to the client but the problem here is that this html needs a bit of revalidation that means in react you write event handlers and functions and you access window and you do a use effect which runs after the component is mounted and all of that is not available on the server right it is too expensive to just run a puppeter a headless browser and render it and you know do that stuff so what people do is they actually wrote a renderer server side renderer for react which is known as react dom slash server right so this is actually a package which you can also use to natively export the react dom into a static html string which then you can rehydrate by rehydrating what i mean is that you just magically attach all the eventlessness again to the static html blob which you sent and that's done but again there are multiple problems here it's not as simple as just doing this stuff and that is where next js comes in that is where this next year's framework comes in because it abstracts away all of these details of rehydration and server side trending and everything from you and on top of it because it is running on a server it can actually give you additional superpowers which are not present with just a simple static reactions button so what nextgears does as a first job is that it renders the same page on server right so it renders the same page on server which you're seeing in a next year's in a react js application once it does that it creates an html blob out of that right so this is an html document which is up and ready for the person to just open in the browser and if you don't know this html is in orders of magnitude faster than javascript so if you have a document which just shows some html document and if you have a javascript document which constructs that from the scratch then you're gonna see that browsers are very very very optimized to display the html part very quickly compared to executing the javascript because javascript is a programming language right it needs to boot up the whole v8 runtime environment in order to pass the language syntax and do so much stuff html on the other hand is a markup language and browsers have really optimized themselves to actually construct layouts very quickly so html is very fast compared to javascript based dom rendering right so that is why next js is super fast compared to reactions for javascript now this difference probably does not matter a lot if you have very small or simple applications but if you are approaching a size where this difference becomes kind of like you know 50 to 100 milliseconds then it can impact the user experience even 100 to 200 as well right so and this happens right this happens a lot of times if even if you just have a library like moment.js for example for date parsing which is a very common job right if you do it on the server side and create an html out of that that is much much faster compared to doing a moment.js render on the client side and then displaying the formatted date all right so the first thing next yes does very well is that it renders the html on the server side and generates this blob of html data which we have the next smart thing which it does at least if you're hosting it on whatsapp or yourself or you know you're using a cdn is that this can store the statically generated page on the cdn right so what the cdn is like we discussed briefly it's a content delivery network but in simple words it's just a dumb server right so it's a dumb server which does not usually execute a lot of code right so this is a dumb server it is just meant to serve files to the user that is it that's all it does and the second thing cdn does is that it is pretty much you know spread across the world so if this is earth then you're gonna see that companies like aws or cloudflare or even versacell i think versus uses aws anyway so these companies have a lot of cdns in multiple countries right which are ready to serve any sort of file closest to the user so this cdn can deliver files super quickly right the fact that you don't have to render this react on server is super critical because node.js is not friendly with cpu right node.js is a slow language for cpu bound tasks that means whenever your server side rendering it chances are that it is going to be a slower time to first byte right because your server would actually need to compute the html that is why with frameworks like nexus which supports server side rendering the best mix is actually using server side generation plus revalidation what is this this is exactly what we talked about which is a bit of a cheating in the sense that you do generate the page with server-side rendering but you put it on the cdn the cdn delivers it to multiple clients in a very fast way and then maybe you are regenerating this page in the background every five seconds or every two minutes or every three minutes or whatever you want to do right so even if your server is a bit slower in generating the page completely from scratch your clients do not face this problem because they have been served by the cdn which is super fast right so this is a super interesting architecture and it can suit a lot of applications from code down for example we use next year's server site generation a lot to news articles to blog posts to generic websites as well which don't require a very critical real-time data thing and even if you do require that then you can always separate your view layer from your you know real-time data layer so this client could probably connect to a websocket here which is hosted on aws let's say and then this websocket can retrieve real-time data but the main document which serves the page itself can very well be hosted on a cdn right and it can be done in react therefore this client receives the page super fast it's seo friendly there is performance there is pretty much anything you can think about now remember i told you that whatsapp does need a server here running or maybe serverless and the reason for that is because of the server side regeneration server side revalidation basically because what you can say to yourself on the server side itself is that hey let me just go ahead and regenerate this page at most one time every five seconds so the moment you do that versa automatically runs some sort of script or whatever internal architecture they have but the cdn flashes out whenever there's a new copy of the page available right so whenever the server says that hey there's a new copy available for this then the cdn says okay i'm just going to stop serving the older copy and start serving the newer copy to the clients right so for this process you need a server whatsapp needs a server and again you don't really manage this if you're hosting it on versailles if you're hosting in this on aws then of course you have to manage that stuff a bit but yeah i mean that's that's pretty interesting so that was a bit about what next.js is and how it works on an architectural basis hopefully if you were new to nextgs or react you were able to get a grasp of the idea what next chase is and how it works on the server side of course there are more components to next shares just compared to just what we discussed but maybe we can take up that in probably some other video so that is pretty much it for this video if you liked it make sure you like and subscribe thank you so much for watching and i'm gonna see you in the next one really soon [Music] [Music] you

Channel: Mehul - Codedamn

Views: 102,845

Keywords: codedamn, react tutorial, react js, learn react, web development full course, react javascript, react tutorial 2021, react js tutorial, react tutorial for beginners, reactjs, reactjs tutorial, react crash course, react.js, reactjs tutorial for beginners, learn reactjs, javascript, learn react js, Create React App vs Next.js, 5 Reasons I Use Next.js Over Plain React, next js, server side rendering, next js vs react, getting started next js, nextjs tutorial, next js features

Id: _otTkX0RApI

Length: 12min 4sec (724 seconds)

Published: Sun Aug 29 2021