The Rendering Triforce

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

Lesson Transcript

  • [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.

  • [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.