Introduction to Next.js 13+, v2 Server vs Client Components

Transcript from the "Server vs Client Components" Lesson

[00:00:00]
>> So how about we go into, let's go into the page here, the homepage here. And I'm just gonna add, I wanna add one of these. It looks really cool. So I'm gonna add one of those in the homepage. I think it's one of these divs here. Let me just collapse these.

[00:00:23] Yeah, it's just one of these divs. I'm just gonna copy this div, just add it underneath it. And I'm just gonna get rid of this anchor tag, and instead, I'm gonna add, actually, yeah, let's make it a div, I guess. So let's make it a div. And get rid of that, rid of that.

[00:00:45] So now if I wanted to navigate this programmatically, I must have copied way more than just one. [LAUGH] Yeah, I added a bunch of them.
>> You got the row, it's all good.
>> I copied the whole row. That's funny. Let me just delete that, that's confusing. There we go, I'll just talk about it this way.

[00:01:06] All right, so if I wanted to route programmatically, You have to understand what a client component is, all right? So remember I told you last time, I was like, you think this component is doing something, but it's actually not. So if anyone has used Node before, I'm gonna do something and you're gonna be like, what are you doing?

[00:01:26] That looks crazy, okay, so, What do you think would happen if I try to import some Node specific library into a React file? What would you expect to happen? Like file system.
>> Typescript will complain.
>> Typescript might complain, let's see, import, fs from fs, typescript says, that's cool, it's cool.

[00:02:01] What do you think might happen if I run this? Lets see, so if I go to contact, Come here. I rendered, that's crazy. How did I do that? There's no fs on the browser. Did it just get rid of it? Did it bundle it out? What's actually going on here, right?

[00:02:24] So in Next.js 12, what would happen is you had the ability to do get server side props. You can do stuff like this. You can say export something like const getServerSideProps here like this. And then you can do all types of Node.js stuff in here. And you can import stuff at the top, Node.js stuff, and you can use it in here.

[00:02:53] And Next did a really good job of splitting out your browser code from the Node code up here and down here. It split it out and made different bundles. Okay, that's not what's happening here. Because we don't have this code anymore, you can't do this in the app directory.

[00:03:05] It only works in the pages directory. So what's actually happening here is that these components are actually server components. They're not client components. These components aren't rendering on the browser at all. They have no interactivity. In fact, the JavaScript from these components aren't even being shipped to the browser.

[00:03:20] It's just pure HTML. So all the jobs here that we've written so far in the app directory is not being sent to the client at all. But we still get to use React by default, which is way different than if you did create React app, whereas all that JavaScript is gonna be in the browser.

[00:03:39] It's also different than SSR, whereas you would render it on the server, but then the client will still pick up and match it and take over, so the code is still there. So this whole time, we've been doing server components, which you'll find out is really crazy. So that's why we're able to do something like the file system.

[00:03:55] So there's nothing stopping me from using a file system in here and getting files in and rendering them, yes, Mark.
>> These link components, can we use nested relative routes? So if you go to contact and you have components underneath or whatever.
>> I see, they're relative to the root.

[00:04:20] So the link components href is not relative to where the link component is written, they're relative to the root of your app. So it's always gonna be the root of your app slash whatever. So yeah, it's not relative to where they're written. Okay, yeah, so server components. [LAUGH] We're gonna dive into that a little more.

[00:04:41] So I need to tell you that because now if we want to use that router, we have to say, you know what, this is now, A client component. We have to add this directive to the top. I think this directive to the top of any component makes it a client component, which is a standard component that you've been using with React pretty much forever.

[00:05:03] But Next.js, by default, makes all the components server components, all right? So we got a client component here. And then now we have a client component. We can use, where is it? This thing, the useRouter thing. So we can do that. We can come in here. We can say useRouter.

[00:05:22] We can get the router from useRouter, like this. And then now there's methods on here like router.push, router.replace. Those are the methods you wanna use to navigate, right? So if I had a button here, I said button and then onClick, like this, onClick, I want to, Run this function like this.

[00:05:52] It says router.push, not prefetch, push, and go home. And then I can say home. Like that. And if I go home, it goes home. So that's the programmatic routing, but you can only do that if it's a client component. Why do you think you can only use a router that manipulates a URL on the client component and not a server component?

[00:06:25] You might not know a lot about the two, but think about the two different environments they run in. Yes.
>> My one guess is that when you have the client component, you can have access to the window.
>> Exactly.
>> Or object.
>> Yeah, you have access to the window.

[00:06:39] This router thing, it's literally using window.location, right? It's window.location and all this stuff on here to create a router. That doesn't exist on the server, so you can't. It's like, I don't know what to do with that. So you have this client side router. So yeah, there are times where you have to do client side stuff, and we'll get to that in more detail.

[00:07:03] But yeah, the big reveal is you've been writing server components the whole time, and there's no JavaScript front end for any of that for free, you did nothing. It just happened, which I think is insane. Because most of you can tell when that happens, was like, this is just some static thing, but no, you can't really tell, so that was pretty powerful.

[00:07:26] And the only thing Next.js did there was enable that by default. React is responsible for server components. That's something that they created. They created this directive called use client and all this stuff. It's React that's making this stuff. Next.js has adopted it really quickly and it was like, let's turn it on by default because you should have it by default, default for free optimizations.

[00:07:48] Opt out when you don't need it and not the other way around. So that's what they're doing.
>> You said the use client is new to version 13 or that's been present.
>> It's new to React 18. Yep, it's new to React 18, yeah. Yeah, React documentation. Next.js has really good documentation on all of this, but React also has, I think I have a link to it in here, let's see.

[00:08:13] Well, I think it's on the next slide. I have a link to like the RFC where all this was introduced, yeah, yes.
>> Scott, for client components, are those never rendered on the server or are those just also rerendered on the client?
>> Good question, so question was are client components never rendered on server?

[00:08:30] Here's where it gets confusing. [LAUGH] So because Next.js also has different rendering modes outside of different types of components as in they have static, they have server side rendering, and they have client rendering. A client component can still be rendered on the server through SSR. But that is not the same thing as a server component.

[00:08:51] And we're gonna talk about difference between the two. So yes, our client component will still need to make sure that it might pass through a server environment at one point. So hard coding window at the top of your client file might actually break versus putting it in a hook where it only gets ran when it's actually in a browser.

[00:09:09] So you still have to do stuff like that. Is type of window undefined or something like that, depending on the mode that you're telling Next.js to do. But that is not the same as a server component that never touches the client. And yeah, it does something called streaming, which is way different than what server side rendering does.

[00:09:28] Yeah, so the question was, I don't have to make an entire page a client component just because one thing in there needs access to something on a client. Instead, I can just make it the one thing, in this case, the button the client component, and that's actually a fact.

[00:09:43] Not only is it a fact that is the recommended way. That's called pushing the client components far down the tree as you possibly can to a leaf, make them leaf components so that you can maintain. If you think about anything that's a server component never gets shipped to the browser.

[00:09:59] So it's in your best interest to make the biggest components server components and the smallest components client components cuz those are the ones that get shipped to the browser. So it's really a different way of thinking about how you build React apps. Cuz I think in the past, you have these pace components or these layout components that fetch data, and they pass the props down.

[00:10:18] And you have these UI components, they just receive props and they're stateless. It's gonna be different now. [LAUGH] You're gonna have small components that do one thing. They fetch the data, they use this thing and their client components. And you don't want to I think what Next.js calls it poison, you don't wanna poison your server components by having it just like, I gotta make this a whole client component.

[00:10:42] Cuz this one button down here my JSX needs accesses something on a client. It's like, well, why don't you make that a component and abstract it away? And then we don't have to worry about that. Because as you'll find out, you can actually use client components in server components and the other way around without them messing each other up if you do it the right way.

[00:10:57] Yeah, so very good question, very good observation. And yes, that is the recommended approach.