00:00:00 By now, you surely understand that Next.js is a mix of a bit of service side and a bit of client side rendering to get the best out of both worlds.

00:00:11 But we have to figure out when to use which of these two provided options.

00:00:17 Can we choose what to render in each environment?

00:00:21 And if so, how can we do that?

00:00:23 Before I answer these questions, let's go back to remind ourselves, what do we mean by client and server?

00:00:31 What do these terms actually mean?

00:00:35 The client refers to the device you're currently using, such as your smartphone or computer.

00:00:41 The device sends requests to the server and displays the interface that we can then interact with.

00:00:47 The server is essentially just a computer device, but it is equipped with a strong configuration and remains operational continuously.

00:00:57 It is where all the code for our application is stored.

00:01:00 So when the client, meaning our device, sends a request, The server performs the necessary computations and sends back the required outcome.

00:01:09 In previous versions of Next.js, specifically versions before 13, we faced limitations where server-side rendering was restricted to individual pages.

00:01:20 This meant that only the route pages like forward slash, forward slash about, or forward slash projects and so on could be rendered on the server side.

00:01:31 This limitation led to challenges such as props drilling and duplication of API calls when passing data to lower level components.

00:01:40 I recommend reading the less code, better UX, fetching data faster with Next.js 13 app router, article to gain a deeper understanding of the differences

00:01:52 between the pages directory and the app directory in Next.js and how they address these limitations.

00:01:59 It provides a truly detailed insight into the topic.

00:02:02 And that, my friend, is where the app directory comes into action.

00:02:07 It not only introduced many features, but also brought the revolutionary change, component-level server-side rendering.

00:02:16 Now, what does that mean?

00:02:18 And that means that we now have the ability to choose where we want to render specific components or sections of code.

00:02:26 For instance, let's consider a component called navbar.jsx.

00:02:31 With this new capability, we can decide whether we want to render it on the server side or the client side in the user's browser.

00:02:39 And that's how we end up with two types of components, client components and server components.

00:02:46 Now, what are these?

00:02:48 Simply put, both are React components, but the difference lies in where they're rendered.

00:02:54 Client-side components are React components that run or are rendered on the user's device, such as a web browser or a mobile app.

00:03:03 And server components are React components that run or are rendered on the server, which is the place where our application is deployed.

00:03:13 But you might be wondering, why would you want to render such a small component on the server side?

00:03:19 Well, think about it.

00:03:21 By strategically deciding to render certain components on the server side, we can save users' browsers from doing extra work with JavaScript to show these components.

00:03:32 Instead, we get the initial HTML code for these components, which the browser can display immediately.

00:03:39 This reduces the size of the JavaScript bundle, making the initial page load faster.

00:03:45 And nowadays, every millisecond counts.

00:03:49 So, rather than fetching and passing data to components separately, we can fetch the data directly within the component.

00:03:56 turning it into a server component.

00:03:59 So if we choose to do server-side rendering, we have many different benefits.

00:04:04 The first one is smaller JavaScript bundle size.

00:04:07 The size of the JavaScript code that needs to be downloaded by the browser is significantly reduced because we're just returning HTML.

00:04:15 Enhanced SEO, search engine optimization.

00:04:19 Server-side rendering helps the browsers improve search engine visibility and the indexing of your website's content.

00:04:27 Remember?

00:04:27 We talked about that a couple of times so far.

00:04:30 Faster initial page load for better accessibility and user experience.

00:04:36 Users can see the content more quickly, leading to a smoother browsing experience.

00:04:42 efficient utilization of server resources.

00:04:45 By fetching data closer to the server, the time required to retrieve the data is reduced, resulting in improved performance.

00:04:54 Okay, but let's get back to the big question.

00:04:57 When to decide what to render where?

00:05:00 A lot of question marks in that one single question.

00:05:03 As the name suggests, where to render each component depends on what the component does.

00:05:09 If a component needs the user to interact with it, such as clicking buttons, entering information in input fields, triggering events or using React hooks,

00:05:20 then it should be a client component.

00:05:23 These interactions rely on capabilities of the user's browser, so they need to be rendered on the client side.

00:05:30 On the other hand, if a component doesn't require any user interaction or involves tasks like fetching data from a server,

00:05:38 displaying static content or performing server-side computations, it can be a server component.

00:05:45 These components can be rendered on the server without any specific browser features.

00:05:51 So, when deciding which one is it gonna be, just ask yourself, does the component require user interactivity?

00:05:58 If the answer is yes, it's a client component, and if the answer is no, it's a server one.

00:06:05 So to simplify things, Next.js documentation provides a helpful table that guides you on where to render each component.

00:06:13 We're talking about server components if you're fetching data, accessing backend resources directly, keeping sensitive information on the server,

00:06:22 or keeping large dependencies on the server.

00:06:26 And we're talking about client components if we add interactivity and event listeners, such as onClick or onChange, use state and lifecycle effects,

00:06:36 such as useState, useReducer, and useEffect, use browser-only APIs, use custom hooks that depend on state, or use React class components.

00:06:48 So, now you know.

00:06:50 Impressive.

00:06:50 You've just discovered one of the most significant features of the modern era.

00:06:55 You now know when to use server and when client components.

00:07:00 That was a big question, but you handled it like a champ.

00:07:03 If you think about it, it's quite easy at the end of the day.

00:07:06 You just gotta ask yourself that question.

00:07:09 What is it?

00:07:10 Does the component require user interactivity?

00:07:13 That's it.

00:07:14 Now, let's talk about another groundbreaking aspect of Next.js 13's app directory.

00:07:21 And that is that all components are automatically considered server components by default.

00:07:27 That's right.

00:07:28 Every component is treated as a server component unless specified otherwise.

00:07:34 So how do we differentiate it from the client component?

00:07:37 Well, it's as simple as writing use client at the top of the component file.

00:07:44 It's a really straightforward way to indicate that the component should be treated as a client component.

00:07:50 Now, that's enough theory for today.

00:07:53 Let's dive into coding.

00:07:55 So to get started, if you truly want to follow along, you can cd...

00:08:00 to get out of the previous lecture, and then you can again execute Create Next App, but this time use the name client-server as the name of your new Next.js app.

00:08:11 That's going to generate a new client-server folder that you can then cd into.

00:08:17 Now, let's get started by going into the app folder.

00:08:20 Then, go to page.js file and delete all other content, but just keep the main tag as well as the h2 tag that's going to say welcome.

00:08:31 And also add a console log saying where do I render at the top of your home page.

00:08:37 Now, after adding that console log, cd into your folder.

00:08:43 install the application by running npm install and then npm run dev to start it.

00:08:48 Let's open up the browser to see if we can get our console log within there.

00:08:52 Okay, it looks like that our where do I render is not there.

00:08:57 How on earth is that possible?

00:09:00 Well, you are correct.

00:09:02 As we previously discussed, all of these components will be server components by default.

00:09:08 So where do we see the console statements if not in the browser?

00:09:11 You know that, right?

00:09:13 The terminal.

00:09:14 Let's return to our terminal and check if the mentioned console log is present there.

00:09:19 And there we go, the log is there.

00:09:22 Now, let's try to create two more components for each client and server.

00:09:27 Inside of the root of the folder, outside of the app folder, create a new folder called components and create two new files inside it,

00:09:35 exampleClient.jsx as well as exampleServer.jsx.

00:09:41 Within exampleClient, add the useClient directive on top.

00:09:45 Render a component that has a console log, I'm a client component, and a div with a p tag saying this is an example client component.

00:09:55 Also, repeat the procedure for the server component, this time without the use client directive.

00:10:02 Render a component with a console log, I'm a server component, and a div with a p tag saying this is an example server component.

00:10:10 And now within our page.js, first import the example client and render it below the h2.

00:10:19 Perfect.

00:10:20 We can see it there and we can also see the console log in the browser.

00:10:24 Okay, that's right, right?

00:10:26 We explicitly told Next.js to render example client as a client component.

00:10:32 Fair enough.

00:10:33 But now go back to your terminal and in there, what can you see?

00:10:38 Well, you can see both I'm a client component and where do I render?

00:10:43 Why is that?

00:10:45 Well, that's because Next.js performs pre-rendering of certain content before sending it back to the client.

00:10:52 So basically two things happen.

00:10:55 Server components are guaranteed to be only rendered on the server.

00:10:59 On the other hand, client components are primarily rendered on the client side.

00:11:05 However, Next.js also pre-renders them on the server to ensure a smooth user experience and improve search engine optimization.

00:11:15 Next.js by default performs static rendering, which means it pre-renders the necessary content on the server before sending it to the client.

00:11:25 And this pre-rendering process includes server and client components that can be pre-rendered without compromising functionality.

00:11:34 Now, let's play around with these components a little more.

00:11:38 Now, import the example server component into the app page.js.

00:11:43 Put it right below your example client.

00:11:47 And now, if we visit the browser, along with showing both client server component text on the website, it'll only show IAM client component inside the

00:11:58 browser's console.

00:11:59 Whereas the terminal will show all three console logs.

00:12:02 All good.

00:12:04 Now for the final play, let's remove the example server from app.pages and add it inside the component exampleClient.js.

00:12:14 That means that inside exampleClient that has the useClient directive and that says I'm a client component, below this div,

00:12:22 we're going to also add the example server component.

00:12:26 Hit save and see the results in the terminal and the browser.

00:12:31 First, you can see what the terminal shows.

00:12:34 As expected, we see all three console logs due to the pre-rendering of Next.js and the server feature.

00:12:41 But something doesn't look good in the browser console.

00:12:44 Why is the server component log appearing there?

00:12:47 Wasn't it supposed to be on the server side only?

00:12:50 Well, in Next.js, there is a pattern at play.

00:12:54 When we use useClient in a file, all other modules imported into that file, including child server components, are treated as a part of the client module.

00:13:07 So consider use client as a dividing line between the server and client code.

00:13:13 Once you set this boundary, everything inside it becomes client code.

00:13:18 Understood?

00:13:20 If not, there is no need to worry.

00:13:23 Just remember, do not include server components inside the client components.

00:13:30 And in case you encounter such a scenario, I have a solution.

00:13:34 We'll discuss it in detail in its dedicated lecture, where we'll dive into the rendering process of client and server components.

00:13:43 Additionally, I'll also share some valuable tips and tricks on creating different types of components depending on real-world examples.

00:13:52 But now, before we dive into yet another Next.js feature lecture, let's work on some tasks together to solidify your learning so far.

00:14:01 Add the use client inside of the app page.js and see where the console logs are appearing then.

00:14:08 And then answer me a couple of questions.

00:14:11 I want to know, please try to give me correct answers.

00:14:15 What are the different types of components in Next.js and explain their difference?

00:14:21 Okay.

00:14:22 Okay.

00:14:22 You're saying client and server.

00:14:25 Okay.

00:14:25 That seems good.

00:14:27 What are the benefits of server-side rendering?

00:14:30 Please don't forget SEO.

00:14:31 We talked about that many times.

00:14:34 And the last question is what are the latest features of the app directory regarding the client server rendering?

00:14:42 Take some time, think about it, and if need be, rewatch this lecture.

00:14:47 It's a big one, covering a lot of aspects, and I want you to truly nail down the client slash server rendering.

00:14:56 Don't forget, if you're wondering if a component is client or server, there's one question you have to ask yourself.

00:15:03 And that is, does the component require user interactivity?

00:15:07 If it does, it's a client component.

00:15:10 If not, it's a server one.

00:15:12 Great work on coming to the end of this lecture.

00:15:15 And don't forget, to truly learn this topic, you have to go to trial and error.

00:15:21 We have to test this out in practice.

00:15:23 And thankfully with JSM, that's all that we do.

00:15:26 So for now, we're going to proceed with additional features, but sooner or later, we're going to explore this in depth within our code.

00:15:34 Thank you for your attention on this longer lecture.

00:15:37 Now take a break and I'll see you in the next one soon.