In this lesson, you will learn about the client-server paradigm in Next.js.
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.