Using Client vs Server React

[00:00:00]
>> Brian Holt: We're gonna get into the various render modes of React, We're kinda ramp up into React server components. I'm gonna argue, kinda four different modalities of writing React, and I call them render modes that's just a term that I threw out there it's not like an official React term here.

[00:00:18]
And the other thing that can be kind of confusing about this is you can kind of mix and match of these so that they're not really all mutually exclusive to each other. So don't think of it as like four different verticals it's just four different techniques that sometimes can mix and sometimes can't.

[00:00:33]
The first one that we're not going to do together, because it's literally the entire point of the complete intro to React v9 is client-side react. You did it, hopefully by the time you got here that this is not the first time I've written React, that's client-side React. You ship an entire Javascript bundle down to a webpage, it gets run by V8 or Spidermonkey or Javascript Core, there it is, or something like that and it renders the app out to the page, right?

[00:01:02]
It's kind of like the traditional spa, the single page application, kind of approach. I'm terming that client side React again, I don't think that's an official term, maybe just the obvious term for it. Your server does nothing for you, all it does is just, it ships some index, dot, HTML file with a JavaScript bundle and everything all the magic happens client side.

[00:01:24]
So this is the way that we've written React for a very, very long time, on ten plus years, and we will continue writing React like this for a very, very long time. The point that I want you to take away is everything that I'm about to show you on the server side stuff It's all optional.

[00:01:41]
It's all opt-in and you should have a reason for adopting these techniques, you shouldn't just say like, server components, they're out now I guess I have to write server components. Server components should be answering a problem that you have and same with everything I'm about to show you, like server-side rendering.

[00:01:58]
There should be a reason that you're doing it, you should measure it, and you should make sure that's actually solving the problem that you want it to solve aaid differently It's not just it's not just a slam dunk win every single time, right? It's a tool that should be measured, that's why I put this like not so hot take here.

[00:02:14]
Start with client side, React on all of your projects, unless you know that you need Next, or you're just already shipping next maybe there's no reason to adopt some of these things. Yeah, they're all contextual performance enhancements, so you should make sure it helps whenever you ship it.

[00:02:33]
And you should actually make sure that you have a need for the performance that you're about to ship because it introduces a decent amount of complexity to your app. So that's my hot take is you don't need to nextify everything, you should nextify some things, probably, but not all of the things.

[00:02:50]
And to be abundantly clear, I love next, I actually really enjoy it as a product. This entire course that you're looking at is a next app, right? I ship it at Neon, I shipped it to previous companies, Vercel is one of my closest partners at Neon, right? Legitimately very much enjoy it so, don't take this as me rating on next.

[00:03:13]
Okay, I have a lot of feelings. Okay, that's just really, what I'm trying to say is I got a lot of feelings. And thanks for being group therapy for me. Okay, so we're gonna write kind of the original ways of doing React server-side components. We're gonna start with SSG and then we're going to move on to SSR, static site generation and server site rendering.

[00:03:39]
So, yeah, fun fact, this entire website is done with SSG with next js, which I think it's really cool. They didn't really have to build SSG into next js, but they did so you can. So if you click on this, is the repo for the actual app itself, and the magic really happens here in this next Config, I think.

[00:04:00]
Yeah, this port, export that line right there I know it's tiny. This line right there basically says, I want you to just render everything and put it into the directory that can be served statically and then it's all shipped to GitHub pages, right? So, what's nice about all of these course websites is they don't have to pay for the Any of them, which is great thank you, Github.

[00:04:21]
I essentially just described exactly what static site generation is, right? I have a bunch of code or I have a bunch of content that's relatively, we'll call it inert, Inert meaning that it's not really interactive. This is just a content website that you're looking at, right? It's just a bunch of texts that, and I wanted to have common pages and really in reality, what I wanted is that I wanna write everything marked down and I wanna to end up in nice looking webpage.

[00:04:53]
That is 100% of why I built this all with next js. So it's just for static content if you're doing a marketing sites or tutorial sites or anything, it's just text on a page or images on a page and there's not really any interactivity to it SSG is exactly what you want.

[00:05:10]
And there's some way to kind of, you can sprinkle a little React interactivity on top of it there's all sorts of really cool hybrid methodologies. This site in particular you can see there's, like, no interactivity to it, right? It's basically just functionally, just HTML, we're gonna build that by hand together.

[00:05:27]
So what I want you to do, you can open a terminal here, I'm just gonna do it on my desktop. Deskto, desktop, okay, and I'm just gona make dir, and we're gonna call it SSG, and we go into SSG, and then I'm gonna to say, npm, init-y you can, if you leave off the -y.

[00:05:46]
You can answer all the questions like, what's this called? What license is this and I am not about that life, I just like generate me a package.JSON, I do not care what's in it, we are going to run npm install. I'm or just i, if you're trying to save calories on finger strokes, I'm gonna say React.

[00:06:06]
You can say React at 19 if you want to, if you're watching this in the future, if React 20 is out, then hopefully I'm coming back soon to teach React 20 but feel free to just say React and React DOM at 19. Okay, I'm gonna open this in my VScode editor, so you can see here I have React and react DOM installed here I have a package lock file.

[00:06:32]
So far so good we're gonna be kind of weaving in and out of common js and es module. The reason being for that is, sometimes switching back and forth between ES modules and common js, which is the two different ways of packaging apps and node js. Is just really it requires so much boilerplate code to get all the things connected together that I decided it was just gonna be easier for me to just say, for this part, we're gonna do ES modules, for this part, we're gonna do common js, so that's just why.

[00:07:04]
I promise that whenever I can, I use ES modules. For this one, we can use ES modules so we're gonna say type module if you don't know what those are, I'll talk about them momentarily. But this is basically saying you can use the import Syntax instead of the required syntax for for node JS.

[00:07:22]
And in particular for this one, we're not gonna do JSX cuz we're just gonna skip doing Babel altogether to keep this really, really simple because the React code is actually not the interesting part of this, that's the node code that's kind of interesting about this.
>> Brian Holt: Okay, and by not doing JSX we don't have to have Babel, veat, Webpack, any of those things involved here, we can just write it all in vanilla, no JS.

[00:07:46]
All right, we're gonna create another file here, it's gonna be called index.html, you can put whatever you want in here, I'm just gonna put html:5. This is just like a very, yeah, html:5, this is called emmett, which is kind of a dead art now because of AI, but I still use it out of just pure muscle memory.

[00:08:10]
If you do html:5, then, just hit Enter here, you'll get this just empty shell of an app. You can really delete these top two lines here as well and I'm just going to call this like React SSG or something like that. Okay, and then we're gonna put a div ID equals root and then we're gonna put a special comment in here that looks something like that.

[00:08:41]
All right, so you might look at, what the hell is this? These two things put together like that, and then my font combines all four glyphs into one mega glyph. So it's an HTML comment, right?
>> Brian Holt: Okay, so then we're gonna split the string on this particular string here and it makes it really easy to find, which is why we do that.

[00:09:13]
In other words, we're going to replace this with React code.