How NextJS REALLY Works

how does next actually work might sound like a silly question it renders react on the server what is there to know about it well I found a lot of the questions that I get about people building with T3 stack and what the tech we recommend here come from fundamental misunderstandings of how next itself actually works and differs from old ways of deploying things like create react app or the single page app deployments what makes next different how should we think about it and how does data actually flow through next.js to your react application let's talk about it this big old dump in the HTML here this is the content of what gets server-side props returned oh boy am I happy you're here for this stream and video because the whole point of this is that SSR is just the first step so next JS as we know is a server rendered framework for react the tldr version is you write react code and before it goes to the users it gets run on a server so the user gets a page that actually has the content of the page if I go to somewhere like uh do I have a single like a simple Veet app deployed somewhere we did so this is an app that was built using Veet normally you put a query param for the hours minutes and seconds I'm lazy don't feel like doing that the important detail to know here is that the HTML that comes down the server does not have the contents of the page so if I Network Tab and actually look at the HTML we got back from the server you'll see that this HTML is like hilariously empty has a div ID root with nothing in it the reason for this is the content of the page isn't created on a server it's created on the client this page is almost instructions for how to make the website and most of those instructions are contained within this index whatever.js file this asset file is a bunch of JavaScript that we bundled that we built when things were deployed on versal and this JavaScript gets loaded by the client and then runs to create the page that the user sees so the control flow here if I open up excalator out quick uh Spa react flow is I'll draw my arrow down the top here is request the bottoms the HTML page I'm too lazy to draw those in here but the Step One is user receives HTML with JS tag should specify that this is like empty so the first steps the user receives empty HTML to JS tag user loads.js from jstag Js from or JS runs starts fetching data and creating page I'm gonna have to make a longer arrow for this one eventually data returns JS finishes rendering page and then finally complete page with correct HTML in order to go from the user making a request to this generated correct page we have to load JS here from the HTML so at this point we'll say HTML here but incorrect so at this point the HTML is here but it is incorrect it does not represent what the Page's content should be it represents a static cached asset of just some of the content of the page and until all of these things happen it is not running or it is not the correct page and it takes all the way to here to get that correct page because the client has to go do another server trip to fetch data I could put a line actually for each point that an additional request or set of requests has to be made so request 1 happens at the top here and then they receive the HTML then they request the JS here so this is the request for that JavaScript and then once the JS comes in and runs it has to request the actual data for the page contents so the first thing you fetch here is the HTML the first fetch HTML then fetch JS then fetch the data you need for the page and finally then after all of these steps you get a complete page with the correct HTML out so each of these you request to the server you get HTML you do some stuff you request the server again you get some JavaScript you do some stuff you request the data that comes back again and now you can actually finish rendering the page but each of those steps it's because the server isn't generating HTML per request on this request the first one is the server doesn't know what you want it doesn't know what the user is asking for it's just handing them an HTML page and from there the HTML page can load the JavaScript and then from that JavaScript figure out what it's actually meant to be doing but all of those steps have to occur on the client's device before can render the correct page the goal of next JS was to prevent this so if I go here and say next.js data flow what next.js does I'm going to delete all of these lines I'm just going to delete all of this because most of the info here is incorrect so user requests page so what happens here when the user requests the page depends on how you have things set up in xjs but we'll assume your server rendering every page for now we'll go into what that means and why you might not want to do that in a minute but for now we'll say next server also it gets request runs get server side props the get server-side props function is server code that runs when a user requests the page so if I request a page like let's say I'm requesting I'll just change it the user requests slash user slash Theo so user request slash user Theo next server guess the request and it runs the get server side props function that is in that page file that get server says props function probably is taking a user ID from the query param in this case the slash Theo it is running that against something like a database to fetch some data and then it returns that as props for that page specifically so it can render that in to the HTML so your react code is running here on the server so react runs on server using properties from get server side props this means that the actual page the HTML that has the information that you want the HTML to have on it is run and generated on the server the server then sends correct HTML to user based on what this react code renders and then the user loads HTML then loads JS to catch up to what server rendered this catch-up step is a very important piece the catching up is how the term for its hydration because when your client isn't rendering the whole page it's just getting HTML that's correct initially you still want things to change like in react if I have a hook that renders account and I want it to go up every time a user clicks but the server rendered it a zero I still want it to increase when I click it on the user side the way that you do that is you take the the HTML that you got from the server and you hydrate it with the JavaScript in order for the hydration to work it needs to know exactly what properties were passed to generate that HTML because effectively what it's doing when you hydrate and react is it is regenerating the same HTML in react so it knows hey that element on the page matches this virtual element in our virtual Dom so it can do updates from that point forward this step this H this hydration step takes roughly as long as the painting step here where you actually are generating and running that code to figure out what you need to fetch and then fetch it and whatnot that takes just as long to hydrate however the page already exists and the user already sees something and they're probably reading the content of that page as everything else is updating behind the scenes and by the time they go to click something all the JS is loaded and hydrated the page properly but what about the server side props if you have server-side props and these return some data that is used to render the page how does the the copy of that rendering path that is running on the client know about that data well here's where things get a little hacky uh do I have any pages that have get server-side props that I can quickly demo on I think ping does cool so here's the Ping call page for me and if I go in here I actually go into the HTML I'll find a script tag somewhere in here I actually be in the head maybe not next data here we are this here this big old dump in the HTML here this is the content of what get server-side props returned this is dropped in the HTML because it is necessary for the JavaScript running on the client to know what was used to render the page so it can properly hydrate and synchronize the client with the server this here is an important arguably Hack That nexjs does in order to make all of this possible so the the magic piece here the thing that you might not have known about how nexjs works is that this page can only be rendered on the client after the server because the data needed to render this page was included on the HTML itself so the main benefit here of next specifically is that the correct data is on the page when it renders for the user the first time you don't have the blank pop in that then shows the correct content like if I go to Twitch right now see this loading state that loading state is if I slide on my network you can see it even more or uh like exaggerated I'll put on Fast 3G and you'll see there's a state here with like a loading spinner oh wow table cash and knock that to slow you'll see that there's a state there where the JS hasn't loaded yet and it just has that like top nav can I easily disable JavaScript on the page cool if I refresh yeah you'll see the JavaScript is disabled and because of that we never get additional data if I go to here I go here and I disable the JavaScript it's going to hang on a loading spinner still but the actual HTML we got back has way more in it including that server data if I was painting a more traditional view here you would get that whole view hell if I go to the Ping home page actually and JavaScript is still disabled right now you know that because there's a video that should be playing and it's not so this is the Ping homepage with JavaScript disabled and this works because the HTML the server sends is correct that correct HTML means your metadata is correct your first paint is correct your general user experience is more consistent because you don't have a big pile of JavaScript that has to load run parse and paint before content makes it to the user that all said you do not have to do this on every page in next.js you can opt in or out in fact on this page you might notice that it still loads really fast that's because we don't want to run this on the server this page doesn't run on the server when we build our application when we like npm run build or we deploy to Versa since the file for this page doesn't have a get server-side props function next is smart enough to generate a unique HTML page for the site at build time and then this route now has static HTML that is fetched when a user loads the page that static nature of the content that's being output means like robots and Google crawlers can more easily parse this and get meaningful data out of it it means users load the page significantly faster it means less like powerful devices are necessary to load your page in the first place and it most importantly here means that you don't need to run server code on every request because you generated that HTML at build time and then sent it up to your CDN to share it from there static assets are incredibly cheap and if you're able to distribute those and have those be like fetched by your users that's going to be a significantly better experience for everybody I see people saying but who actually disables JavaScript robots disable JavaScript a bunch of embedded devices disable JavaScript a bunch of like crawlers SEO those types of things stable JavaScript most importantly users have JavaScript disabled until the JavaScript loads every user who goes to your site has JavaScript disabled for the first however many milliseconds maybe even seconds depending on the speed of their Connection in their device every user has JavaScript disabled for some amount of time on every website they go to and tell the JavaScript loads and ideally the content of that page will be correct the first time it loads without needing the JavaScript all to load in behind the scenes somebody's asking is there a scenario where this isn't good it's either there are situations where this isn't good there are somewhere it isn't necessary where you might want to say eh Don't Bother we'll just fetch everything on client we do that a bunch at ping we have a handful of pages where just like the dashboard for example server rendering the dashboard makes no sense also love that the menu buttons work with JavaScript disabled fun stuff if you have a page that you just you don't care about the HTML being correct like people are exclusively using it on computers in San Francisco with really fast internet connections it's not as big a deal or something that we deal with you have like a bunch of Av devices you want to interface with so when I go to this page I need to use your AV I need to use your camera and your microphone in order to activate this call if we don't have JavaScript running I can't do any of that this page is actually useless without JavaScript or just why this page has a big old loading spinner in front of it it's still server renders and it still puts a bunch of data into that server render in order to make the metadata here correct so when I link this call to somebody the right stuff comes up when I do that it's like if I go to one of my favorite sites the Twitter card validator by the way super pro tip if you're working on metadata one of the easiest ways to know if your is working so when I paste a ping call here unable to render card preview because I must have broken something kind of recently very good to know theoretically this should load fine surprise that it doesn't URL metadata Checker I think Facebook has one the Facebook link validator sharing debugging cool please work cool this one kind of works so here's what it would look like I have my old T3 logo Theo's room come chat in Theo's room this is what the metadata of that page contains if this page was client rendered entirely this would not be able to come through because this would have to load the HTML then run some JavaScript then create an updated page and this robot's not going to do that they're just going to download the HTML and read it they're going to stop at that first step I think that's what a lot of people are missing when they see things like this a lot of devices stop here so the HTML here is here but it's incorrect if your device isn't running JavaScript because it isn't loaded yet because you're a server and your server doesn't load JavaScript because you're parsing things because you're reading metadata if you stop here and a lot of things do this does not work you are not getting the data that you need here realistically speaking because of all that it's important to be considerate of server rendering opportunities when you have them and the HTML contents that your users are getting when you can so yeah be more considerate of how your servers are actually rendering things what's happening where and to an extent how the HTML that comes out of your server is shaped and how it looks there are gotchas here yeah one of the big gotchas is not all code can be run on a server things like calling window directly actually not all code can be run on a server there's a lot of code I don't want to make that smaller there's a lot of code that can't be run on a server things that call Window window can't be run on the server because servers don't have Windows servers run Linux kind of a joke seriously though servers don't have the window primitive so you can't call that directly and do things to it you can't like check users AV devices on the server because you're not on their device where the AV devices are you can't call local storage so things that call local storage local storage doesn't exist on the server exists on the client you don't have access to that on the server if you want things like that you want to put those in the request the server so the server can include the right things it's again one of those huge Arguments for having cookies is the cookie will be in the initial request and you can render the right things accordingly other code that can't run on servers uh anything stateful if you have state full code you either need to put that in a database and synchronize it or you can't like an on click a uh set State those types of things those aren't going to run on a server basically anything that isn't there before use effects start running and before actions start running isn't going to be there when you render on the server what else is there that I have run into where I like wanted something and I couldn't use it because I was server rendering I'd say user device is part of window like the only way I access user devices is through window and similar window based globals uh media queries ooh media queries is a fun one somebody asked Theo what about real-time page updates isn't it better to have client-side rendering for this case oh boy am I happy you're here for this stream and video because the whole point of this is that SSR is just the first step the thing that next.js is and I want to be very very clear about this because I feel like this is what people are missing and I'm pumped to ask the question because I want to call it out next only does this this is next this is a normal Spa once your HTML has gone through the user I should actually move this here because this is the point where the HTML is correct so this section up here is next and this part here is react once your server code has run you're in a normal react app the only difference between something like create T3 app or sorry I would like create react app or Veet the difference between those and the difference with something like next is what happens before that HTML comes if I was to horizontally Spectrum this is probably like the most useful part there's if we were very generic like there is HTML loads let's make three of these HTML loads JS loads and uh JS paints correct content I'll even calls like JS synced with HTML content these are three steps that both like a create react app or Veet or other single page app have as well as something like next.js the difference between create react app and beats versus something like next is purely here from a request to complete Spa load let me move all of this quick this section what the hell why is it doing that I did not find that there at any point why does it think this is here and not do that so this section here this little bit in this area this is where things are different in next land the only difference between next and another single page app is right here this is the next remix section when you're using something that's rendering on the server and it's something like next remix whatever else so I don't know why this Arrow keeps killing itself whenever it's something like next or remix and it's rendering running code on the server it runs here before the HTML loads but from this point forwards I should give this background color too wrong color I'm also going to move this up God why is excalator doing this to me I want to unlink this Arrow I never want this can I just tell arrows to never connect might be okay if my arrow is never connected again okay this is the next remix section and this is a normal Spa so given this spectrum here you have the next remix action and a normal Spa the difference here the thing that makes these two so different because right now it looks pretty similar there's just like that little section in front the thing that that means oh God I can't just make all three of these shorter at once okay better so the thing that is different here is that the HTML that loads here I'll put an arrow here initial initial HTML is correct in next remix Incorrect and then Spa so the important difference here like the distinction the initial HTML when you use next to remix is correct and it is incorrect if you're using a traditional Spa which means that what happens from here down is different as well if your HTML is correct then when the JS loads it's not filling the page it's recreating the page in JavaScript land in order to synchronize that state with the page state so this step is a little different depending on if you're going to the next remix route or not but the distinction that really matters the point I want to drive home the is that the only difference between next to remix and something like Vita create react app the only difference in terms of how Pages load render behave is that your HTML loads different content initially this first step is correct if you're using a server-side rendered framework and it is incorrect if you're using a single page app based framework and that is fine if the thing you're building doesn't need correct HTML but it probably does at some point I saw somebody else in chat saying this is why a single page app loads faster no it does not because if I run this code here at build the thing that the server has cached is the same if I have HTML that next built and do you have HTML that create react app built those load just as fast if I want to make different HTML for every request or every user I can do that and that will be slower for the first paint but it won't be slower overall the HTML that the user gets from a single page app is incorrect and it will always take more time for them to load the JavaScript fetch the date of the JavaScript needs and then paint to the correct page but if the page is static I can do that at build time here and now my page and your page my page being a next app and your page being a create react app have the same time to that first HTML the difference is your HTML is wrong if I want if I have Dynamic data we want to fetch it let's say we want to fetch my view count on this page you could load the HTML page with no data in it you can load the JavaScript that JavaScript parses renders the page realizes oh I need that data if there's a third fetch to go get that data bring it back and now you have the correct content in next in remix if you choose to block the page on that content you make one request the server gets everything it needs puts it in the page then the thing the client gets back is correct the first time and that overall takes way less time way less time and if you don't need to do that because the content is static then don't block every request on the server generate a static page from Nextdoor remix it is very easy to effectively turn next to a remix into create react app plus by never using get server-side props and never using loaders in actions the server code only runs if you write it so don't write it if you don't need it and now you've just made a create react app style single page app with better build tools or you can block things because you have pages that need content and that's fine too but chances are at some point you're going to want correct HTML and at that point you're gonna wish you were using an extra nexjs remix from the start and I found almost every project I have ever worked on I got to the point eventually where I wanted to add an endpoint or I wanted to block on like generating this page or at like I wanted to use incremental static revalidation or regeneration and revalidation whatever to make sure the content of that like metadata is correct on request all of these things quickly get noticed when you have problems that require you to work around them I I don't know how to put it other than like if you don't think you need some form of server-side rendering or generation you're going to regret that soon you're you're probably close to the point where you realize that somebody asked if you have conditionals on the front end I.E like if content does that get run during hydration it depends on where the conditionals are and if the date of those conditionals operate on is on the server or not it's like if you're blocking the page on getting data from Prisma and you only render a certain view if that data has like let's say you use the user's token or their cookie to fetch the user profile and you only render this page if they're an admin if you have code that's if user is admin render this else render something else then the HTML the user gets is correct I think I've covered everything I want to here the main point I want to drive home is that next JS isn't this crazy alternative framework that doesn't do the things that react does it doesn't in any meaningful way change how your react code runs on the client at all the only thing next.js does and the only thing remix does is the request before the content is on the user's device next.js makes it easier than ever to generate HTML per page for your users so that when they load the page the HTML is correct and then the JavaScript loads and becomes a normal react app without next or remix you're getting incorrect HTML the client has to fetch everything update it all then it only then will the user get correct content and the benefit of these Frameworks in the server-side stuff is that you have control over what HTML the user gets but don't think that using next.js means that you can't use all the other react stuff you're used to this is still a single page app and all the people saying single page app versus next don't actually understand what next.js is because next JS isn't a multi-page app framework it is a single page app framework it is a react based framework that runs on the server that happens to let you generate different HTML based on different routes but you're still building a single page app once that first page loads it's just a normal react app that's it like I I hope this video covers Us well enough that I can start linking to it and no longer answer these annoying questions next gives you the benefits of server-side rendering and single page app style react applications in one react is a way to make interactive websites and next.js is a way to make the HTML correct for those interactive websites as soon as it loads that's it next.js isn't an alternative to these things next is an alternative to react next is an alternative to like single page apps next lets you build a really powerful single page app with correct HTML from the server on first paint and a much better overall developer experience around it next is a single page application framework that happens to be back-end ready happens to run on servers and it happens to enable you to do really cool things but it does not have to do those things if you don't want it to because in the end it is a way to build react applications next is not something that prevents you from having an interactive customizable live experience on your app because I guarantee you ping is more of an app than most of y'all saying you don't need next jsr building ping is right about as interactive and live as you can get our average page session time is two and a half hours two and a half hours on one page we don't care that much about how quickly that first pane comes through but having the power of a framework that lets us build the right HTML build the right Json calling the back end in our own single Focus environment is so powerful that we use next.js to build our single page application that is very much an app next JS lets us do that better and it is a great framework for it just because you don't think you need really good SEO right now does not mean you don't need the benefits of a server rendered application framework and next.js is still the best option for that with all that said if you still somehow don't get this ask some questions in the comments maybe come hang out in the Discord I want to figure out what isn't resonating here because a lot of people are asking to be frank not just dumb but outright stupid questions about next.js versus create react app and I want to be very clear there is no use case for create react app anymore V templates for a single page app experience if you really don't need server rendering are nice but generally speaking more often than not having server rendering will make your life easier and you should probably consider integrating it in your applications hope this was helpful join in the Discord if you haven't subscribe if you haven't for some reason those buttons here I think over there click it or on that subscription grind appreciate you all a ton thanks for stopping by e check out the next video

Channel: Theo - t3․gg

Views: 98,677

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg, nextjs, next

Id: d2yNsZd5PMs

Length: 28min 24sec (1704 seconds)

Published: Sun Oct 09 2022

Reddit Comments

[u/hereisthepart]

at last... he created some good quality content again instead of shitposting like he has been doing lately.

duality of this guy is amazing. always an admirable guy ofc but his shitposter influencer persona of late was exhausting for me tbh.

[u/Beginning-Scar-6045]

cringe

[u/roden0]

Pretty basic and imprecise explanation of how Next works

[u/No-Proposal-2145]

can someone explain what ping gg does, why can't i just use obs window or display capture with cropping from a zoom call?