The Rendering Triforce
This lesson preview is part of the Blazing Fast Next.js with React Server Components course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Blazing Fast Next.js with React Server Components, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] So, we want to build an e-commerce website and we want to make it fast. In Next.js, speed is highly related to the way we render the content.
[00:11 - 00:19] And in Next.js, we have three ways of rendering the content. We have server-side rendering, static site generation and client-side rendering .
[00:20 - 00:29] I don't really like those wordings because I think they are confusing, they exist for historical reasons mainly. I prefer to think in terms of "where" and "when".
[00:30 - 00:39] So we have two "wheres", we have "server" and "client". Okay, we have server-side rendering and client-side rendering in the user's browser.
[00:40 - 00:47] And we have, for server-side", we have two "whens". We have "build-time rendering" and "request time rendering".
[00:48 - 01:00] So if I summarize, we have "request time server-side rendering". You open the URL, the server computes to HTML and gives you back the whole HTML for the page.
[01:01 - 01:06] We have "build-time server-side rendering". The server's computes HTML, ahead of time.
[01:07 - 01:14] And when you open a URL, the HTML is already ready and it's just sent to you. And then we have "client-side rendering".
[01:15 - 01:26] In the browser, JavaScript can update the content. So it's important to figure the right kind of render we want for a given content of the application because it impacts performance.
[01:27 - 01:41] Request time server-side rendering will do a new computation for each request hitting the website. So if you have 3 million users, you get 3 million requests and 3 million updates, 3 million computations to display the page.
[01:42 - 01:57] And you know, intuitively, you can understand that it's not very efficient for a website that displays the same content for every user. Static rendering is the most performant because you compute stuff ahead of time and then display to the user.
[01:58 - 02:07] But it's less dynamic: what happens if you have a personalized content, what happens if you want to update the list of products. This will be the core subject of this course.
[02:08 - 02:16] And then "client-side rendering" happens in the browser. So the thing is that it happens a bit later compared to server-side rendering.
[02:17 - 02:31] Because you have to download the webpage, to download the JavaScript and to run it. Most of them server-side rendering with complement client-side rendering, the server prerenders content, and then the client makes it interactive.
[02:32 - 02:36] So we can blend those intelligently. The way of rendering the content matters a lot.
[02:37 - 02:45] And in this course, we are going to focus on my favorite, which is static rendering. And we will try to get the best out of static rendering.
[02:46 - 02:57] I think it's sometimes underestimated. Developers often think that it's limited, but you can actually push it very far and get a performant website with up-to-date content.
[02:58 - 02:59] And that's what we are going to do in this course.