Static vs Dynamic Rendering in NextJs 13

in this video we're going to talk about static rendering versus Dynamic rendering now let's start by what rendering is rendering is the process of converting your code into HTML to generate the content of your page now when talking or thinking about rendering really two questions come in mind the first one is when does this rendering happens and the second one is where does it happen let's start with the second one because it's not the topic of this video I'm just going to touch on it and then we would dive into when is it happening now when we're talking about where does this rendering happening what we mean is does it happen on the server in your infrastructure whether it be a consistent server or serverless functions or Edge functions it's on your machines or does it happen on the client side in the browser on your users devices now we're not going to dive into that really here but when we are thinking about when does this rendering happen it's either at build time so ahead of the time you are compiling your code and generating the HTML and caching the result of running your server components and client components and serve up that cached result to your users on subsequent requests which is called Static rendering so it's you rendering or generating the content of your page at build time now the second time or the other option is actually generating the content of your page at runtime add request time so every time that a user sends a request for one of your pages your server is going to actually run your react codes and components generate the HTML and send it back to the client which is called Dynamic rendering so the difference between static rendering and dynamic rendering is really when this rendering is happening is it at build time or is it at request time Now by default next.js aims to statically render as much as it can to optimize for performance if you can fetch your data and statically build your pages next.js is going to do that first unless you force it to use Dynamic rendering which we're going to talk about how or you're using Dynamic functions like cookies and headers that are only known at request time which opts that page into Dynamic other than that you aim for static now when you're creating static Pages you can also refresh or recreate those static Pages which is also known as incremental static regeneration the ISR that we know from the pages router in nexjs 12. by either defining a specific amount of time that you want xjs to actually invalidate the cache recreate that page and then cache it again or you can manually do that by creating endpoints for which you would just call and revalidate a specific path and regenerate that page so static site generation or ISR is similar or the equivalent of what we know in the pages router we'll call them static rendering in Nexus 13 or inside the app router now as I mentioned the static is the default and there's two ways that you can opt a specific page or route segment into Dynamic rendering the first one is using route config options so if you head to the documentation where you can find this route segment config options these are the options that you can export from your pages and layouts also route TS or JS files these are your API endpoints that defines the behavior of that page in terms of dynamic versus static behavior revalidation and whatnot uh the option that we're going to care about in this video is this Dynamic so if you click on this Dynamic it would take you down here and you can see the options that you have for this Dynamic that you can export it from your page now if you export this Dynamic parameter and set it to force Dynamic it is going to force a dynamic behavior for that page it means that is not going to Cache the results of page that page component generation or dhtml so therefore it is going to run that component run that page every time a request is sent to that page this is the equivalent of SSR or server-side rendering in the pages router that you would have accomplished by using get server-side props or exporting get server-side props from a specific page now you can go through the options and what the other ones are but the idea is or my point is that you can export this Dynamic set it to force Dynamic to turn and otherwise a static page into a dynamic segment or dynamic route now the second reason where your static Pages would be opted in or turned into Dynamic pages is when you're using Dynamic functions now there are mainly three Dynamic functions in xjs headers and cookies from the next server and also if you're using search prams those are query strings in your urls now cookies and headers as I mentioned are information that can only be known at request time so you can't really know them at build time so that page that's using cookies or headers it is going to need to run dynamically at request time therefore if you use those functions that page is going to be opted into Dynamic rendering now the other thing that I mentioned is search prams so inside of your page component you receive the context object which has the prompts property that's your Dynamic routes or dynamic segments and it also receives the search prompts these are your query strings at the end of your url now if a page component a server component uses search prams it is going to be opted into Dynamic rendering because again search params are only known at request time not at build time for your client components you don't receive the search prompts prop inside of a client component but you do have a hook which is called use search params it is going to have access to that same search prompts object from the URL and if you're using the use search prompt hooks inside of a client component that is going to also be opted in to Dynamic rendering now the thing with client components and using usage prompts hook inside of it is that if you it not only that client component will be turned into Dynamic but it goes all the way up uh to the first suspense boundary that it finds and renders that whole segment dynamically so if you have a client component that uses use search Prime hooks it's a good idea to wrap that client component inside of a suspense boundary that you can create yourself so therefore it's not going to affect anything above it it's just going to wrap that client component and dynamically render that client component leave the rest to still be statically rendered if if they can or if they haven't opted into Dynamic rendering so it's a little side note for optimization if you're using the use search Prime hooks inside of a client component other than that for your page components if you're using search prompts you'll be opted dynamically to Dynamic rendering that's it for this video folks so I hope this helped you learn or visualize static versus Dynamic rendering if you have any questions hit me up in the comments like always if you're interested in learning nexjs I do have a course about Nexus 13 where I explain all these Concepts or the new paradigm of building react applications using react server components and the app router index.s 13. there's a link in the description so check it out let me know if you have any questions and until next one bye

Channel: Hamed Bahram

Views: 6,575

Keywords:

Id: X9hEMJiW6Ks

Length: 8min 11sec (491 seconds)

Published: Sat Aug 12 2023