Next.js 14 Tutorial - 52 - Static Rendering

in the previous video I briefly mentioned the three server rendering strategies in next shares in this video we will dive into the first one which is static rendering static rendering is a server rendering strategy where we generate HTML Pages at the time of building our application this means all the data and content for a web page are prepared in advance this approach allows the page to be built once cached by a CDN and served to the client almost instantly this optimization also enables you to share the result of the rendering work among different users resulting in a significant performance boost for your application static rendering is particularly useful for Block Pages e-commerce product pages documentation and marketing Pages now that we understand what static rendering is and when to use it the next question is how do we use it or how do we inform next year that we want to statically render a particular route in our application here's the good news static rendering is the default rendering strategy in the app router this means all routes are automatically prepared at build time without additional setup you might be wondering at this point vishwas throughout this video you have mentioned that HTML is generated at build time but there is no build for our application yet is there aren we running our application in development mode this is a fantastic question to have so let's spend a minute to understand the distinction between a production server and a development server for production an optimized build is created once and you deploy that build code changes are not made on the Fly once it is deployed a development server on the other hand focuses on the developer experience we should be able to make changes in our code and see see those changes immediately reflected in the browser we can't afford to build our application once make changes rebuild and so on therefore the next year's team decided that for production bills a page will be pre-rendered or statically rendered once when we run the build command however in development mode a page will be pre-rendered or statically rendered for every request so if you visit the homepage it is pre-rendered and served refresh and the page is pre-rendered and served again this ensures that code changes are reflected in every request it might seem strange when I say this but you don't have to worry about static rendering in development mode it is more important to understand how it works when you build your application before we dive into the build process though let's clean up by deleting the dot next folder generated during development in the about page let's also render the current time as it helps prove a point new date. to local time string now in the terminal run the command npm run build this command creates an optimized production build of our application the output folder once again is the next folder but this time the content will be different from those of the dev script there are quite a few things to cover about the build process so let's start with the terminal output it displays information about each route in our application with three columns route size and first load JS route refers to the route itself so about or dashboard for example size refers to the size of the assets downloaded when navigating to the corresponding route client side in the browser and first load JS refers to the size of assets downloaded when loading the page from the server the first load JS shared by all includes the CSS from global. CSS some runtime code framework code node modules vendor code like react for example and some code related to the routes and components in our application this is shown as a separate metric with the overall size being 84. 2 kiloby for the individual routes generated we see the root page corresponding to page. TSX in the app folder with a size of 11.2 kilobytes but if you navigate to the homepage in the browser both the 11.2 KB and the first load shared bundle of 84.2 kilobytes are downloaded resulting in a first low GS size of 94.4 KB we also have a 404 not found page not created by us but generated by NY to render when the route is not defined in the app router the size is 885 bytes and the first load is 85.1 KB the about route which contains a server component is 136 bytes when you navigate client side and 84.3 KB when you load the page from the server the dashboard route which contains a client component is slightly bulkier with 370 bytes and 84.5 KB from the server hopefully the table is now clear for the next part let's focus on the legend links provides a legend for the type of routes generated for our root route which is page. TSX in the app folder we have a Hollow Circle this indicates static rendering where the route is automatically pre-rendered at at build time as static HTML content this is also the case for our 404 noton page about route and dashboard route this indication helps you understand which routes are pre-rendered at build time especially when starting out with NEX shs let's now move on to the last part which is understanding the build output next sh generates the build output into the next folder which contains various files and folders essential for serving our application to incoming requests from the browser here we can primarily focus on the server and static folders within the server folder we have an app folder corresponding to the app router here let's focus on the important file types first the HTML files our built info shows that the root page is a static HTML page the same can be found in the app folder as index.html similarly we have 404 not found in the terminal indicated as static rendering and we can find the not found. HTML file in the app folder we have about. HTML corresponding to the about route containing an H1 element and dashboard. HTML corresponding to the dashboard route containing a heading and input and a paragraph remember even client components are pre-rendered as an optimization step and that is the reason we see the client component HTML besides HTML files it's also important to note the RSC payload for each route for example we have about. RSC for the about server component and dashboard. RSC for the dashboard client component this special Chason format generated by react for each route is a compact string representation of the virtual Dom it includes abbreviations internal references and encoded special meanings for a server component the payload includes the rendered result of the server component like the H1 tag with the text about page the jsx from our component for a client component however the payload includes placeholders or instructions where client components should be rendered along with references to their JavaScript files for instance the dashboard route which is a client component contains a reference to the code for the dashboard component if you were to search dashboard page in the RSC P load we don't find it however if we track this page hyphen 3 c05 file in static chunks app dashboard so static chunks app dashboard page 3 c05 you can see we have the H1 tag with the text dashboard page this is the file referenced in the RSC payload and this file contains the component code necessary for reconciliation and hydration all right the built output is clear let's serve our application from this nextext folder in the terminal run the command npm Run start this runs our application on localhost Port 3000 in the browser with the network tab open in the dev tools click on empty cache and hard reload you can see the preview of the HTML page and in the response you can see the HTML code apart from this HTML I want to draw your attention to the RSC file the one for dashboard this is essential for building the UI on the client side when we navigate to SL dashboard using the link the component code for the dashboard represented by Page 3c5 has also been downloaded if you navigate to the dashboard route you will notice that the route is rendered without the need to download any additional resources from the server the initial load includes everything required for client side navigation however we must ask the question how does ni shs know to download the dashboard component code ahead of time well this is due to a feature known as prefetching in njs prefetching is a technique used to preload a route in the background before the user navigates to it routes are automatically prefetched as they become visible in the user's viewport either when the page first loads or as it comes into view through scrolling for static routes the entire route is prefetched and cached by default therefore when we load the homepage next sh prefetches the about and dashboard routes about if you did include a link keeping them ready for instant navigation but what about dashboard. HTML in the server folder we did not download that well this file is served when you directly navigate to the page in the browser for instance if you directly load the URL localhost 3000 dashboard you receive the HTML for the dashboard along with the Cod ship to the client for hydration finally I want you to obser observe the time rendered in the about page it is 7:30 36 p.m. this is going to remain the same regardless of how many times you refresh the page as it was rendered when the application was built you can see the same in the HTML file we will explore more about static rendering when we deal with data fetching in the next section but to summarize what we have learned in this video static rendering is a strateg where the HTML is generated at build time along with the HTML the RSC P load is created for each component and JavaScript chunks are produced for client side hydration in the browser if you navigate directly to a page route the corresponding HTML file is served however if you navigate to the route from a different one the route is created client side using the RSC payload and JavaScript chunks without any additional requests to the server starting rendering is great for performance and use cases include blogs documentation marketing Pages Etc I understand that this concept might be challenging to grasp fully if you're feeling slightly confused I highly recommend re-watching the previous few videos running the same code on your local machine and I guarantee you'll gain a much better understanding of static rendering in next sh my goal is to explain not just the what but also the why why we write the code we do and why things happen the way they do thank you for watching and if you're finding the videos helpful please do leave a like And subscribe to the channel I'll see you in the next one

Channel: Codevolution

Views: 11,471

Keywords: Codevolution, React, Next.js, Next.js 14, Next.js Tutorial, Next.js 14 Tutorial, Next.js Tutorials, Next.js for Beginners, Next.js 14 Tutorials, Next.js 14 Tutorial for Beginners, App Router, Next.js React Server Components, Next.js Routing, Next.js Data Fetching, Static Rendering

Id: WCcqnFRF9YA

Length: 13min 45sec (825 seconds)

Published: Mon Mar 04 2024