Transcript from the "React Server Components" Lesson
>> Let's just dive right in to the most craziest thing about this framework and all the things that, hopefully, we have a lot of questions on [LAUGH] and stuff like that. But I'm just gonna dive right in and kinda talk about it because I think everything going forward is based off this foundation, so I'm just gonna introduce it early on.
[00:00:16] So there's really not a lot of context right now, but you will build the context later. And that is gonna be server components. So React server components is a new paradigm introduced in React 18 and has been adopted by Next.js 13. And basically, the whole new premise of React.js 18 and Next.js 13 with React Server Components is trying to address some of the earlier issues we've had with different types of rendering modes in the framework.
[00:00:48] So before we get into that, let's just talk about like some of these different types of rendering modes. So the one you might be familiar with the most is called a SPA or S-P-A, single page application. This is just like, you did create React app. And you just built something with like React router or some other HTML based router and you built an app, that's a single page application.
[00:01:08] You just have one index that HTML page in the browser and every time you do routing, you're just switching out that div with another component. But the HTML page never goes back to the server and reloads or refetches. So it's just a single page that switches out components based off of a router.
[00:02:05] So you just wanna see your preview. And I remember it was a time where even Google was not good at crawling single page applications. So you had all these companies that would take your app, pre-render it, spit out the HTML and then give that to a crawler, or even crazier, you do it dynamically, you create your own server, detect that like, a crawler is on my website.
[00:02:25] Don't show them the single page application, show them the pre-rendered version instead, like that was a thing, I remember having to make that. So it was pretty nuts. So to address that, server side rendering came out, right? Server side rendering is basically kind of the same thing but with a different first step.
[00:05:01] And if there is some interaction on there, well, that interaction, that specific component that has interaction, let's say it's a form. Only that component can be a client component. So therefore, the rest of the page doesn't have to wait for that bundle to download to interact with that form just so you can move around.
[00:05:19] So things are being progressively, what they call progressively enhanced. So we're choosing what to download at what specific time based off what needs versus like, we can only download everything at one time. Even though, this whole page doesn't need any interaction, but this one component does. But now we don't have to do that anymore.
[00:06:06] So it's not like, well, this is Express over here and this is React, so I can clearly tell which one's back in and which ones front end. Okay, now that's not gonna happen anymore. You are going to be writing React components, and they could be working on the back end or working on the front end or both.
[00:06:21] So like having to know which version is doing, what is kinda confusing, but we're gonna walk through how best not to get confused through some of that. So I'm gonna just talked about a little bit about difference between React Server Components versus server side rendering. But basically server side rendering performs that.
[00:06:40] It only does server start reading on that initial load, right? But then if you try to go back to it, it's just gonna be client side routing, so you kinda lose the benefit of that. Whereas with React Server Components, every time you go to it, it's gonna render on the server.
[00:07:13] So this makes performance basically easier to do and it's not all perfect. But for the time being, I think it's a really good experiment with the React team is doing, what the next year's team is doing, and we'll see if it sticks. If you ever built something in.
[00:07:31] Let me see what's an equivalent like Elixir, Phoenix, PHP, Ruby on Rails. It's basically that, where you're just doing all the logic for a component executing on a server and not on a client. Yeah, that was a long spiel. I don't expect you to remember and know all of that.
[00:07:49] We're gonna go through a lot of this in examples, but I wanted to give you that primer. So we're gonna start mentioning some of these words as we write the code, and I want you to know what they are. Cool, any questions
>> I got kind of a weird one.
[00:08:02] Working with hot wire for rails before, like the HTML over the wire, ones that mostly use web sockets under the hood. Is that what RSC is doing too or is it?
>> So I know React 18 implements streaming of the HTML to the browser. I think Next.js has its own approach where they actually just pre-rendered instead of streaming it, the HTML, but you do have the ability to like stream data to it.
[00:08:31] So there is no web socket's implemented here. There is no real time component of like streaming HTML, like Hotwire or like what Elixir and Phoenix, like what they do especially in Next.js. They did do the pre-rendering, but I don't think there's anything stopping you from doing it if you want it to, but I think next year is does just does the pre-rendering instead of like doing the streaming by default, but no, great question.
[00:08:53] But as far as like, what you get is pretty much the same thing.