Next.js 13 - Server & Client Component Basics

in this video we will take a look on server and client components in next year's 30. I'll right away at the beginning show briefly the documentation of them and point out few things from there but if you have already read that and just want to see the coding part then you can jump ahead I'll leave chapter markers down below but let's get started so here is the documentation for server and client components and probably the number one thing that you need to know is set right here so by default all components inside the new app directory are react server components so this allows us to automatically adopt the server components with no extra work and some of the benefits of using server components are set right here so we can better leverage the server infrastructure for example large dependencies that previously would impact the JavaScript bundle size that is sent to the client side remains now entirely on the server so the amount of JavaScript sent to the client is reduced which is good however we can't work entirely without JavaScript so the app directory still needs some JavaScript and when a route is loaded the next JS and react runtimes will be loaded and those are cachable and predictable in size and this runtime does not increase in size as our application rows and whenever we need some additional JavaScript on the client side for example some click events or that kind of stuff then we would need to use the client components so the server components are completely rendered on the server and then the client components are surprise surprise rendered on the client and with nextas decline components can also be pre-rendered on the server and then hydrated on the client if pre-rendering and hydration are something that you are are new to no worries I have a video explaining both of those so I'll leave a link for that in the description and you can check it out so basically all of our components inside of the app directory are rendered as server components unless we add a keyword use client on top of the component code so we can use client components by adding this use client statement at the top of the component file and that's all we need to do in order to render a component as a client component so when should we then use server components and when client components well first of all if you are trying to use some features or apis that are only usable in client components next test will throw an error so that's one way to know it but right here we have a nice table explaining some of the things that you should do with server and client components so with server components whenever you are fetching data you should use server components there are exceptions you can also fetch data with client components if you really need to but it's recommended to fetch the data in the server component then of course if we access some backend resources or if we have some sensitive information for example tokens or API Keys those should be kept in server components and then also it's recommended to keep large dependencies on the server which reduce the client-side JavaScript on the other hand if we want to add some interactivity for example with click handlers or on change handlers or if we want to use state or lifecycle effects or perhaps or only apis or some custom hooks that that depend on state effects or pressure only apis then we should use the client components and also if you are using react class components then you need to use the client components also but I think that's enough for us to get started with the client and server components and we can jump into the vs code so let's create a simple application that demonstrates the difference between server components and client components and I have here a fresh next JS application using next cs13 open and what I'm going to do first is get rid of the pages folder and create a new folder app and inside of that I'll create page.js and over here I will export a function like this and save it and then let's fire up our Dev server and we need to add the experimental up there true statement to the next says config so let's do that like this and then try to run our Dev server again and switch the browser and see how it looks okay we get the hello text so everything is good now let's hop into the page.js let me make this a little bit smaller like this so let's create an application that fits this blog post from an API and then just shows them in a list and I should say that for this we are just going to use a dummy Json API to get the posts and then display them so let's get started by actually adding a heading over here and then I will add a post component right here that will handle the data fetching and displaying the blog posts and since we don't yet have this I will import it over here like this and then create that component so new file posts.js and then I will export the function from here like this and let's save it and see that it works looking good next let's fetch the data so up here I will Define a function that fetches the data like this so we are just going to fit the posts from this placeholder API so if we navigate this URL with the browser we can see it returns a bunch of blog posts as a Json so next let's call that function inside of the post component and then render the posts like this so we are calling the function over here getting the post and then mapping through them and just rendering the title so let's switch to the browser and see how it looks so it looks like we are getting bunch of these titles from the API so let's say we wanted to show the title and the body of a blog post and let's actually create a new component called post that will display those so I will create a new file over here called post.js and then export a function from here that displays that data like this so we are getting the title body and ID as a data prop and then just displaying the title and body over here so let's go to the posts dot JS and import that component like this and then use it instead of the deep like this let's save it and see if it works looks like it so we get the title over here and then the body over here and we have a bunch of blog posts so that's great so at this point I just want to point out that this post component right now is a server component and actually all of these components we have are server components and that's because they are in the app folder and they are not using the use client statement so the post component is also a server component and this data fetching that we do over here is done on the server and then the client just gets this component with the data already rendered so no data setting to this Json placeholder API is done in the client side and we can actually test this so we have the network tab open over here so I will clear that and we can actually also change the fetch step and now if we refresh the page we can see that no fetch request was made to that Json placeholder API so all that is done in the server but how about if we wanted to add a like button over here for each of these posts so let's take a look how to do that so first of all I will create a new component for that so new file and like button and then just export a function from it like this and then let's use it in the post component so let's import that like this and then let's render it under the body like so now let's save this and switch to the browser I will refresh the page and looks like it's loading quite a bit this actually happened to me a couple of times I'm not sure what this is about but what helps here is just to close the server and then boot it up again I don't know if this is something to do with the app device still being in beta or something like that I don't know but that that at least helped last time and what do you know it helps now so yeah we have the like button over here now so right now the like button is a server component but let's actually make our like button a real button and add some functionality to it so let me just make a couple of modifications like this so I added a button with on click Handler just throwing an alert saying that you like this so let's save it and go to the browser and right now we can see that we have an error over here saying that event handlers cannot be passed to client component props so what this means is that in order for us to use this click Handler we need to convert this like button to a client component and how we can do that well all we have to do is add that use client statement up here like this let's save it and go to the browser and now we have a like button over here and no error anymore and if we click the like button we get the alert saying that you like this like this so as we read in the docs if we want to add some unchanged stuff we need to use a client component and also if we wanted to use some use date or use effect hooks for example then we would also need to use a client component so let's say we wanted to change the button text based on user clicking on it so for that we would need use state so let me add some code over here and let's go through it together so like this first I imported the use state from react and then added disliked State for the component and then when the user clicks the button it toggles the is liked variable and based on that it will display either unlike or like so let's save it and check the browser so now we have the light button over here and if we click it it will change the text to unlike so using the U State also requires us to use client components so this component over here uses client components so it's rendered on the client side whereas the post component over here is rendered on the server side so this title and body are already rendered in the server and then this component is sent to the client but the like button itself is rendered in the client side because we use the use client statement at the top of the file hopefully this clears things up for you regarding the client and server components I know this is just a short simple example but I still felt that I should make this video just explaining the basics to learn more about the features in xs13 check out these videos over here and if you are not already please do hit the Subscribe button below I would highly appreciate it I'll see you in the next video

Channel: Tuomo Kankaanpää

Views: 16,189

Keywords: next js, nextjs, next.js, server components, client components, client components next js, react, reactjs, pre-rendering react, next.js tutorial, next.js 13, next js 13, nextjs 13, james q quick, lee robinson, fireship, fireship io, next.js conf, next js tutorial, vercel, next js vs react, next js api

Id: IcexKbnTEAM

Length: 12min 46sec (766 seconds)

Published: Mon Oct 31 2022