Next.JS 13 Server and Client Components in 4 Minutes

what's going on guys it's Cooper codes and in this video we're going to be talking about next js13 server components versus client components let's get into it we can first start by looking at where do we see server or client components in xjs applications in this example application we can see that we have a bunch of different components which are labeled a client or server we see that things like the nav bar the sidebar and the main feed are server components and the things with interactivity like buttons or search are client components we can get started by defining some terms a server component is a component that is fetched and rendered on the server while a client component is a component that is fetched and rendered on the client and so these might seem like some simple definitions but why is this important we can take a look at what the user experience looks like for someone without server components we can start with the user attempting to access a website for example the user has to install all of the JavaScript necessary to build our website which can cause large load times they have to download every single last piece of JavaScript necessary to build your website but we don't want slow load times we want to load fast so what can we do this is where we can use server components let's look at the user experience when our website uses server components just like before the user is going to ask to view our website but this time the user only needs to download the JavaScript necessary for client components and not the entire build process of the website for Server components they download the direct HTML and JavaScript built by the server for the server components so instead of asking the client to fully build all of our different components we can instead just ask for the server for the result of those builds and so this brings up a really important question when we work with server and client components which is when should we use server or client components next.js offers this kind of large table showing a bunch of different use cases but I'm going to show you guys a simplified version of this do you need to fetch data or reduce your client-side JavaScript use a server component do you need to access browser related things such as on-click events the window object or browser apis then use the client component it's also important to use a client component if you use a life cycle effects or use state for example use State use reducer use effect things like that so we can look this diagram from earlier and start to figure out why they labeled some of these things as client components we can see that the buttons most likely use an on click event which needs to get fired on the client side and so we can create client components for the buttons of this diagram the search bar may contain certain handlers on the client side for the text input like a use state to manage the text of the search bar and because it's a use State therefore we can make it a client component everything else can be built in advance on the server which is one of the main features of using client versus server components it's going to increase the load time of your website by a bunch when the user doesn't have to download everything initially so your nav bar your sidebar and your main feed in here can be built on the server and the user disk asks for that data it's also important to understand that server and client components can be interweaved you can have a server component in a client component and a client component in a server component in whatever way you need to have those at each component in your application you should ask should this be a server or client component components in next.js are server components by default and so asking this question at each component you have can result in using nexjs13 to its most full capability for making your apps as efficient as possible an efficiency tip that gets recommended is client components should be leaves in your tree the next JS documentation recommends this to increase the efficiency and a leaf in a tree is going to look like something that has no children under it so if you look at this client component in the bottom left you're going to see that there are no children under it which means it's a leaf in your tree all right guys hopefully this was a great overview for understanding server and client components if you're interested in more practical videos where I go into next js13 and I really build Out full applications feel free to subscribe I have a bunch of nexjs13 projects and overviews like this on the way thanks so much for watching

Channel: Cooper Codes

Views: 16,240

Keywords: next.js, next.js 13 tutorial, beginner next.js tutorial, next.js beginner project, next.js api call, learn next.js, first next.js project, understanding next.js, why you should learn next.js, next.js 13, next.js 13 new features, next.js 13 api, mantine, maintin UI, next.js mantine ui, mantin next.js, next.js 13 api call, next.js 13 useState, nextjs client component, nextjs server component, client component, react server component, react server components nextjs

Id: lJxU3-61F2I

Length: 4min 20sec (260 seconds)

Published: Fri Nov 11 2022