Next.js isn't React

hi there the title of this video is not clickbait nextjs is not the same as react so why am I saying this well a few days ago I sent out an email and a small part of it was taken out of context it quickly stirred up a big controversy on the official nextjs subreddit and Josh made a video saying that react has been cancelled this was the part that was posted on Reddit now xgs isn't react and you won't get better performance if you use it the way you use react let me explain those used State use effect and other hooks we're used to are client stuff we must get rid of that way of thinking completely to build a next year application now the controversy was mostly stirred up by the part of the email being taken out of context and some unclear wording on my part but I'm kind of surprised at how many people reacted to it saying next is react is the same as saying a house is the same as bricks bricks are essential for building a house but a house consists of many more elements such as Windows Doors and Furniture just as nextjs extends react with additional features and capabilities so in this video you'll get a noons straightforward explanation of why NEX GS is the future of the web and why if you're not using it correctly you you must start doing so right now in full transparency the ultimate nextjs course which I've been working on for the last 9 months will be released on September 22nd so without further Ado let's get started to be a next GS developer you need to know react react is the base for next it's similar to react in JavaScript you need to know JavaScript to become a react developer we really can't say react is the same as JavaScript though it's just built on top of it going down that path we can also say that next is no different than JavaScript which is no different than binary code as it all turns into ones and zeros in the end now there were many comments expressing frustration comments like this one saying next isn't react stupidest thing I've seen all day and we also had this comment but next GS is react looks like someone needs to learn the difference between client and serice side react these comments are not correct but don't take my word for it let's look at some blog posts and GitHub pages from the official react and nextjs documentations react isn't designed for SSR at least not right now they have only shipped the react server components in the NEX GS app router and react team even said that they recommend using an existing framework unless I'm missing something the only way you can use react server components right now is with next 13.4 app router or through a lot of thinkering and other thirdparty Solutions react team says that server components are still experimental but you can expect that they release an initial version really soon but in the meantime we're working with Frameworks like next and others to prepare for broad adoption yet another article says that server components are experimental and are not yet ready for adoption so use them in your projects at your own risk so with that in mind NEX GS can handle SSR right now at this moment reliably as a full stack framework it's these extra abilities that make NEX GS different from react and good for writing server side code all of the features added in next 13 other than silly naming conventions were all introduced by the react team well yes at the end of the day it's just playing JavaScript the Facebook team worked for many years to create this Library called react that does the same thing as JavaScript with a couple of extra features like creating components which we can still technically do using vanilla JavaScript everything was there when Brandon Ike created JavaScript still react has its unique role we chose react for a boost in performance thanks to features like the virtual Dom and its improved development workflow now when we talk about nextjs it's like reactjs and steroids it kicks Up Performance several notches and speeds up development even more the moral of the story is next 13 isn't react especially now the react we're used to so fully utilizing nextjs means using its server components I mention that we must change our way of thinking and approach building nextjs application differently than we approach building react applications especially the server side aspects to which some people immediately said good luck creating a navigation menu without use state or without client components we can start the ground zero how can we Implement onclick on change or all of that functionality in server components well if you watched our next GS crash course seen our project videos read our nextjs ebook or paid attention to this email you'd understand that the goal is not to eliminate hooks we still want to use them when managing State effects and browser events client side means executing the code on the user browser this means that the server sends the HTML CSS and JavaScript code to the client then the browser executes the JavaScript code and the page is displayed server side means executing the code on the server before it is sent to the user the server executes the JS code pre- renders the content and sends the pre-rendered HTML file that doesn't mean it doesn't send JavaScript files at all it still sends some but a lot less than before this leads to the page loading faster because the user's browser doesn't have to download a bunch of JavaScript code and executed to render the page so how do you know what to render on the client side and when to render things on the server side nextjs has made a nice chart to show us where to put our code depending on what it does if your code fetches data does backend stuff or can work on the server it's better to put it on the server the only situation where you should use client is if your code uses things like buttons input fields and other things that need events States and effects or needs the web browser to run them then put them on the client side but there's more to it trust me even if you think it's impossible to render something on the server there might be a way I think the best way to explain this is on a real world example so let's Implement a form with with nextjs we all know forms right they need to be interactive handle events and send data so there's no way they can be rendered on the server side right or as one commenter would put it server components are useless anyway because practically everything requires a used client well that is not true as you get better with writing server side nextjs code you will get better with transforming things that maybe don't need to use client to use the server you you might have seen it on the masterclass admission model or the ultimate next 13 course weight list form here's how it works instead of making the whole masterclass page on the client side with use client we're only rendering the form or the modal on the client side the rest of the page can be static and can be rendered on the server side leading to better performance that's the beauty of next gs13 architecture you can choose where to render even the tiniest element now let's let's look at our example to understand it better let's say you're developing an edit form in plain react here's what it would look like we import the necessary components and functions from our project files and react we create a functional component called page set up State variables using the use State hook such as message and item use the use effect hook to fetch the data we then fetch an item using the fetch item function and update our state and pass an empty dependency array through run this effect only once then we have an onedit function that handles form submission and updates the item finally we have a jsx for our component where we create an input to edit the item's name looks just fine right well not exactly all of this is happening on the client's side and imagine if this was a part of a much larger page what if we pre-render a part of the code on the server side that way with' reduceed the load of JavaScript code that has to be executed on the user's browser so here's the server side approach and the thinking shift I mentioned before first separate the client and server components think what has to go on the client versus what can go on the server in react this means breaking up the page into components the result we have one server page where we import the necessary components use it as an async functional component called page which is a server component where we just at the top fetch an item using the fetch item function and then render the jsx finally we render the edit form component and pass it the fetched item as a prop pretty simple clean and easily readable right and then this is our client component it has a use client directive so it's rendered on the client and then here we do the rest of things as they are all the states and needed interactions the state and the onedit function as well as the form so so what did we do here we're telling nextjs to render the edit page with the pre-filled input fields on the server and send that render content to the user the rest of the content such as the interactivity of the edit form will be handled by the browser but why should we do that why not just use plain react and do it on the client side well there are many benefits of doing it the next G way let's cover them one by one the first one is faster initial page load take the example I just mentioned we already generated the HTML page on the server and send it to the client now the user's browser won't have to make any API calls or execute that whole client side chunk of code the browser only has one job which includes those event listeners and hooks doing everything else on the server has reduced the time it takes for the client to render or display that initial page therefore the page loads faster and by the way if you want me to show you how we built our new Js mastery. proo website with NEX 13 mostly on the server side and our thinking process while building it let me know in the comments if many of you requested the video is coming really soon now the second reason is reduced client side load with react we're doing everything on the client's device and we're making a big assumption here we're assuming that the user's device is capable of doing this some older phones or PCS with lower processing power will struggle with server side rendering we can lift that burden off the user and do some of the things on the server side this is amazing for devices with limited processing power again I'm not saying that we do everything on the server side but I recommend that you render on server side when you can the argument against SSR is that devices and the internet are getting faster every day and that is true but but still there are hundreds of millions of people in developing World in areas with slower devices and internet of course it depends on where your users are if you have a website for a local sushi restaurant in New York you don't really need to take into account International users it all depends on the context so what server side rendering because the server takes the load of executing the JavaScript code users with slower internet and slower devices can start seeing content more quickly which is never a bad thing the third reason to use proper nextjs is SEO better SEO means that search engines like Google can understand your website better and recommend it to more users think about how often you look things up on a search engine SEO can make a big impact on businesses and it's one of the reasons I recommend using next when working on projects for most clients client side rendering has worse SEO because it's sends minimal HTML content along with heavy JavaScript files search engine crawlers can't understand JavaScript that well server rendering is different the server will send the complete HTML file and minimal JavaScript meaning that the Crawlers read the bigger HTML file resulting in better SEO also faster initial load speed matters Google values it as the top ranking Factor when deciding whether to display your website or not there is a reason why so many famous companies including Netflix Tik Tok twitch Hulu notion Target and many more use nextjs and finally the fourth reason for using next is improved user experience you probably know the annoying feeling of a site taking too much to load getting frustrated and leaving the website this is a bad user experience faster page load leads to less waiting time and ultimately a a better experience all of these so far are great but there's also a slightly more complicated benefit that has caught my attention and that is resource proximity let me break it into Parts first it means reduced Network latency and if you're a gamer you know what Pingo latency is it's the time it takes for information to go from one computer to another and when the server makes API calls these calls are typically made within the same data center this reduces the network latency when compared to making API calls from the client side extending this to something related to databases we have improved data locality simply put this means keeping the data you need close to where you need it serers side resources and databases are often physically located near the server aiming for faster access to the data so if we make calls from the server well they're closer and finally enhanced sec security you may have heard that envs are Exposed on the client side and a good solution for that is to keep sensitive data and API keys on their server side and these were just the benefits of server side rendering in general nextjs has a ton to offer other than SSR file-based routing is amazing compared to react router Dom and we can't forget better loading and airor State Management so I truly believe that saying next is react is false and I hope this video helped clarify the differences next is the best way to use react in 2023 it's the first recommended framework in react docs and docs also recommend not even creating plain react apps anymore so what allows me to speak about this topic with knowledge and certainty about what I'm saying I've used next for every single personal and Commercial project ever since next 13 came came out my team and I wrote a 100 page ebook on next 13 and we're now extending it to twice its size with new information and most importantly I've been working on the ultimate next 13 course for the whole of 2023 and I'll launch it on September 22nd it's my best course yet a Project based course but a lot more indepth and much more interactive than my YouTube videos it will also explain how webdev truly Works under the hood and help you get a deep understanding of the web now that AI can output basic code next 13 is amazing and there's so much more to learn to truly use its full potential and get incredible performance so if you don't want to miss the launch launch exclusive bonuses and the launch discount join the wait list by going to JS mastery. proo sl13 or by clicking the first link in the description that's all for today I hope to see you inside the course and in the meantime to get you fired up you can watch the next gs13 crash course or build the threads app have a wonderful day

Channel: JavaScript Mastery

Views: 91,628

Keywords: javascript, javascript mastery, js mastery, master javascript, nextjs, next js, next.js, nextjs 13, next.js 13, react vs nextjs, nextjs 13 app, nextjs course

Id: r8nXMA_pf0w

Length: 17min 11sec (1031 seconds)

Published: Fri Sep 15 2023