Rendering in Newline Commerce (demo)

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:23] In this e-commerce application, we're actually using the three ways of rendering content. The product list is rendered statically, server-side and ahead of time. And from the code, it's actually not that obvious. The thing is that it's actually the default in Next. So when you just fetch data from your database, you are doing static server-side rendering. So that's how we get the products.

  • [00:24 - 01:02] We will dig this code more deeply later on. It's not obvious what it's doing, but it's actually quite intuitive when we write it. The preorder session is mixing static server- side rendering and client-side rendering. Basically, when you get the number of preorders, what happens is that we render server-side the current number of customers, and then we update this number client-side. So the user doesn't have to refresh the browser to see new preorders in this call to action. And finally, we have a user info component, which is displaying user-specific data.

  • [01:03 - 01:26] User-specific data cannot be computed ahead of time, because we don't know yet which user is going to access the website. So here we are using dynamic rendering, request time rendering, and we are reading the request cookies to get the authentication token of the user. That's how you do user personalization in Next.js server-side. So that's the dynamic.

  • [01:27 - 01:36] We have product list static, preorder section mix static and client-side, and user info is dynamic server-side.

  • [00:00 - 00:23] In this e-commerce application, we're actually using the three ways of rendering content. The product list is rendered statically, server-side and ahead of time. And from the code, it's actually not that obvious. The thing is that it's actually the default in Next. So when you just fetch data from your database, you are doing static server-side rendering. So that's how we get the products.

    [00:24 - 01:02] We will dig this code more deeply later on. It's not obvious what it's doing, but it's actually quite intuitive when we write it. The preorder session is mixing static server- side rendering and client-side rendering. Basically, when you get the number of preorders, what happens is that we render server-side the current number of customers, and then we update this number client-side. So the user doesn't have to refresh the browser to see new preorders in this call to action. And finally, we have a user info component, which is displaying user-specific data.

    [01:03 - 01:26] User-specific data cannot be computed ahead of time, because we don't know yet which user is going to access the website. So here we are using dynamic rendering, request time rendering, and we are reading the request cookies to get the authentication token of the user. That's how you do user personalization in Next.js server-side. So that's the dynamic.

    [01:27 - 01:36] We have product list static, preorder section mix static and client-side, and user info is dynamic server-side.