Everything You Need to Know About Server Components in Next.js 13

with release of Nexus 13 Nexus officially supports react server components and here's everything you need to know about serigobbones you can start building better and faster apps right away let's start with what server components are with server components the initial HTML is rendered on the server this means the initial page list is faster and the client set JavaScript bundle size is reduced this is possible because we can fetch data in the server instead of on the browser if serves that close to a database and keep large dependencies server side with nexjs all coupons within the app Brower are server components by default including all special files and components in the app directory for example if we create a components folder inside the app directory every component will be a server component let's try this create a new component folder inside the app directory and add a new component named server component.js as I said before server components are great for fetching data because it reduces the amount of work the client has to do so let's set some dummy data from an API create and you get data function that gets some dummy data from the dummy Json API then we can call this function inside our server component unlock the data to the console import the component on our home page if you open a local server and then open the developer console we can see that the data is not being locked in the console but if we look at our local server the data is being printed this means that the data was successfully fetched on the server side because logging the data to the console would be on the client Side by default all the components inside the app world are server components with no extra work getting data from the server is great for performance but what if we want to add into activity to our app we need to make our historical client component otherwise we'll throw an error we can test this by importing new state into our server component if we open a local server and navigate to the index page we see that next.js throws an error saying that we can use hooks inside a server component this is because hooks are only available in kind components fortunately it is very easy to create a client component let's create a new component called client component.js that displays a simple counter we usually use stage hook to create a counter that increments every time we click on the button we display the count and the button or a return statement then we import the component into our home page I will try to earn this code you will notice that it displays an error this is because our client component is currently being rendered on the server to make this a client component we need to use the use client directive add this client at the top of the file and must come before any Imports if we try to earn this code now we see that it works we can now use hooks in our client component and add interactivity to our app using client components is as simple as adding a line but this backs the question when you use sorry components and when you use client components the official documentation has a great table showing when do you switch use server components when you need to fetch data access back-end resources such as databases or when you need to keep sensitive information on the server for example API keys or access tokens if your application has large dependencies you can also use server components to reduce the size of the client-side JavaScript bundle on the other hand client coupons make more sense if you need inactive UI if you rely on States and life cycle facts use browser only apis like local storage or the clipboard API have custom hooks that depend on state FX or browser only apis or if you use react class components it's important to understand that we don't need use client and every file it only needs to be defined once at the top of the tray since any module imported into it will be considered a client component server components are guaranteed to render only on the server client components are primarily rendered on the client but with next shares they can also be pre-rendered on the server and hydrated on the client next.js does this first behind the scenes because we can also Nest sir records within client components which can lead to unexpected Behavior to avoid this it's important to know the best practices for using server and client components the first best practice is to move client components to the least of your component tree whenever possible for example you may have a page that has static elements such as logo links images Etc but also interactive UI like a search bar that uses state instead of making the whole Patriot client component move the interactive logic such as the search bar to a client component and keep the rest as server components if we import a server component line component into our home page we can see that the accelerate component is rendered in the server and the clanker points weren't on the client because if we click on the counter the incurrence but the API data is not printed in the console this means that the server component is still fetching the data service side by what we want to mix them how do we make server and client components one important thing to remember is that we can import a server component into a client component this is because it will require an additional server round trip Let's test this by importing our third component into our client component as you can see when we try to click on the counter it doesn't work anymore next.js doesn't allow us to import server components into client components the recommended way is to pass server components to client components as props let's modify our client component we add a new crop children and run it inside the div then move our server component into our client component inside our page.js file if we go back to our browser and click on the counter we see that it's working again if we open the console we don't see the data being locked anymore but if we look at our local server the data is still being printed with this approach our components are decoupled and can be rendered independently our server components rendered on the server before our client component is being rendered on the client even though they are nested this is a recommended way to compose server and client components together and that's actually very like react because passing jsx components to other components is nothing new and has always been part of the react environment this comes in handy when we want to use react contacts most of the time we use react contacts to share data between our components react contents only works with client components so we can use it with server components but we can pass surrog upon the client components as props and use react contacts inside our client components let's try this out by moving our counter state to our new context create a new photocard contacts inside our app directory and then create a new file called counter context.js make sure it's a client component by adding use client at the top of the file we create a new context called counter contacts and a new provider called content provider we usually use statehood to create a counter that increments each time the button is clicked we then create a new provider that passes the counter state to our contacts let's wrap our layer.js file with our new counter provider we want to wrap only children and curly braces with our counter provider instead of the entire HTML document because this makes it easier for an xjs to optimize our app we can now modify our client upon JS file to use our new counter contacts import the content contacts and the use context hook replace the existing use datehook with the contacts now if we go back to our browser and click on the counter we see that's working again with the counter contacts rendered at the root all the other client components throughout the entire application will be able to use this context but all the other components that are not client components with State salary components and be pre-rendered on the server and that's basically how you use server and client components in nxtjs by now you should have a pretty good idea of when you need to use server and Clank bones in your react app if you found this video helpful I appreciate a like And subscribe to my channel for more videos like this to help you become a better web developer thanks for watching and see you next time

Channel: CodeSnaps

Views: 21,882

Keywords: next js, react, nextjs 13, server components, server components react, react server components, web development

Id: aoHK8skFZ1U

Length: 9min 6sec (546 seconds)

Published: Thu Jul 27 2023