Static RSC - the new default

[00:00 - 00:10] You may have heard about React Server Components already. They have been brought by React 18 and Next.js 13 new architecture called the App Router.

[00:11 - 00:18] So, to understand server-side rendering, we have to also understand React Server Components. They are not exactly the same thing.

[00:19 - 00:27] The idea of the React Server Components is that it's rendered only on the server. You don't need client-side JavaScript to run them.

[00:28 - 00:36] It was not true in previous versions of React. Even if you were using server-side rendering, you still had to do some client- side computation.

[00:37 - 00:44] You still indeed client-side JavaScript for React. Now, we can have pure server components and those are React Server Components.

[00:45 - 00:49] They are easy to demonstrate. We can just disable JavaScript and reload the page.

[00:50 - 01:04] So, I go to the developer tools, and control + shift + P, opening the command interface, and I can disable JavaScript. And I reload the page and well, my e-commerce webpage still works.

[01:05 - 01:09] It might not be, it doesn't just display. It actually works.

[01:10 - 01:14] I can navigate between pages. I can read the product list.

[01:15 - 01:23] I can see more products. I can even preorder a product with JavaScript disabled.

[01:24 - 01:36] You may think that most users will have JavaScript enabled anyway, so it might not make that much sense. But you have to think about it more in terms of performances.

[01:37 - 01:49] The need for JavaScript means a need for computation client-side. So, it means slower websites and again slower websites, slower e-commerce websites are less revenue.

[01:50 - 02:10] I'm talking a lot about e-commerce in this course because that's the example that shows this issue the best. However, it's also true for a blog, for a company website, for a media website, for example, press websites are undergoing a lot of competition, so they have to stay very fast to get the user interested in their content.

[02:11 - 02:29] So, React server Components just tell us about the "where". They are rendered server side, but they can still be rendered either at build-time, ahead-of-time when you compile the application before deploying it online, or at request-time when the user hits the URL and opens the website.

[02:30 - 02:37] Like, right now I'm sending new requests to the website. And default is actually static rendering.

[02:38 - 02:49] So, if you don't use information coming from the request, the page will be static. So, to demonstrate that, we can just add a log when the page renders and see that it's only logged when I compile the application.

[02:50 - 02:59] Let's do that. I'm adding a log to the home page, saying "rendering home page" to be totally consistent.

[03:00 - 03:11] Then I will build the application, I will save a few logs from Next.js. Okay, it's creating my production build, there are a lot of warnings, anyway.

[03:12 - 03:23] So, it's rendering the product list because I also have logs there, and we can see here that it's rendering the home page. Okay It's rendering it twice, this is due to React's strict mode.

[03:24 - 03:38] This is just a protection, something that protects you against the accidental mistakes. No, I'm going to run the application, and we are going to see that the home page is not rendered anymore on new requests.

[03:39 - 03:50] So, I'm running the application, I can open it in my browser, reload, check the logs, run the server, and still nothing. It's not rendering the home page again.

[03:51 - 04:08] So, the default in Next is static rendering. Here, I have a very simple home page that does nothing, it just displays a React component that also does nothing, it just React, JSX code, see it just displays stuff, nothing much.

[04:09 - 04:20] So, it's static, because I'm not using request-specific information. React's Server Components with static rendering is kind of the "utopic" scenario.

[04:21 - 04:47] You compute the page once, ahead of time, there are no client-side computation, that's really the minimum computation you can have, and the minimum comput- ations means the maximum performances, means the best user experiences, and then the best revenue, conversion, or whatever metrics you are interested for your website. That's something that we want to keep as long as possible.

[04:48 - 05:07] Sometimes it's not possible, sometimes it is, and we will show in this course that we can keep static around, we can keep React Server Components around for a long time, even when we have tricky use cases, like wanting to display always fresh data. Here are the product lists of our e-commerce website.

[05:08 - 05:22] When React's server components have been released, there has been this joke run that React was kind of reinventing PHP. If you look at this code, we can see that it's just rendering some HTML and a React component.

[05:23 - 05:43] And if we open this React component, it's rendering more HTML, and other React Server Components. We can see that they are React Server Components because they don't use the explicit use client directive, and they are not using any React hooks like useState, this means that they are not using any client-side JavaScript.

[05:44 - 05:53] In a way, they are just like templates, but return in JSX, the React syntax. But the thing is that React Server Components are still React.

[05:54 - 06:19] They integrate deeply with React Client Components. For instance, if I open the preeorder section here, we can see that it's using the "use client" directive, and also hooks like "useSWR", more on that on the fourth module, and also the "useId" from React, which is just a way to get unique IDs for a firm input.

[06:20 - 06:40] So it's a client component, but it can be rendered in a server-side component. For instance, the preorder page is not using "use client", at the top, it's a server component, static as default, until proven that it needs dynamic data, but it can still render a client component.

[06:41 - 06:51] So the thing is that you have the choice of making some parts client, some parts server very intuitively with React Server Components.