Discovering the rendering strategies

- [Instructor] Data fetching is one of the most valuable feature in Next.js. Let's see together an overview of the different methods to fetch and pre-render data with Next.js. What is data fetching? In Next.js, data fetching allows you to render HTML on the server. The benefit for the user is to get content faster without experiencing any blank or loading page. The other important benefit is that the content can be indexed by search engine bots and social media link bots. When it comes to server side rendering, you have two ways. First SSG, which is short for static site generation. Then SSR, for server side rendering. And last you have static path, which is used to predefine path and render content in advance. With static site generation, the server renders all the page at build time. The exported function getStaticProps runs on the server during the next build process. So the page is pre-rendered before the application even starts. So with static site generation, it always run during the next build process at build time. So when should you use static site generation? So what you should know is that SSG is mostly suited for data that does not change, that remains static, and you know will not require any user input. The way it works is that the server send HTML ready files to the browser. So the app, the page is rendered very fast, which is best for performance and best for SEO. This means also that the page is available ahead of the user's request, which guarantees the best user experience. getServerSideProps runs at request time. The function getServerSideProps runs on every page request to return the content, and the return props between client side page transitions. So the function getServerSideProps always runs at request time on every page request during the next link or next router process. So the way it works is that the server statically sends HTML files to the browser. The browser downloads the JavaScript and executes the React. So while the JavaScript is being loaded, the HTML page is rendered immediately and is right away visible. So no blank page on the screen or loading time is experienced by the user. So this is when the JavaScript is loaded, that the page then becomes interactive. This is a process called hydration, meaning that the HTML content is rendered right away and becomes interactive once the JavaScript is loaded. So when should you use getServerSideProps? When you know that the content needs to be updated, and also when you use dynamic routes, because you know that you're going to need user input to make a request and pre-render the data. Then you have getStaticPaths that use dynamic routes to pre-render the static path and returns to the static path based on the params, based on the user inputs. So that can be used with getStaticProps as well because both runs at build time. So this is useful when you know that you're going to use static content and that you need to generate path ahead of time, in advance, ahead of the user's request. By default, Next.js pre-renders every page. Next.js generates HTML for each page in advance, instead of having it all done by the client side JavaScript resulting in a better performance and SEO. So you have two forms of pre-rendering, static site generation and server side rendering. The difference is when the HTML is generated for a page, and which method to use depends on the use case. Static site generation is recommended when you know that the static content does not change or doesn't need to change. The HTML is generated at build time, and will be reused on every request. Server side rendering is recommended when the content needs updating. So the HTML is generated on each request. I propose that we see next one example of each for every use case for data fetching with Next.js.