Next.js 13 - SERVER and CLIENT COMPONENTS in just 5 MINUTES (2023)

server and client components in next 13. in next 13 there are two rendering environments for your application code the client and the server the client refers to the browser on a user's device that sends requests to a server for your application code while the server refers to a computer in a data center that stores the application code with server and client components react can render on client and the server at component level all components inside the app directory are a react server components by default this allows you to automatically adapt server components with no extra work with server components the initial page rules are fast and the client-side JavaScript bundle is reduced this is so because the initial HTML is rendered on the server and the client just adds interactivity client components enable you to add client-side interactivity they are pre-rendered on the server and hydrated on the client given this component in x13 it will be treated as a server component by default but since it has interactivity and event listeners like on click and make use of the use that hook next 13 will draw an error since this alkaline side features to fix this we should Mark this component as a client component by adding use client directive at the top of the file they use clientelective must be defined at the top of a file before any Imports use client does not need to be defined in every file the client module boundary only needs to be defined once at the entry point for all the modules imported it to be considered client components now here we have some use cases for server and current components and these use cases can help you to determine whether to Mark a component as a client component or let it be just a server component whenever you want to fetch data make use of a server component but note that it's possible to make use of a current component fetch data by using the use effect Hook when you want to access backend resources like databases make use of a server component you are required to keep sensitive information on the server such as access tokens and API Keys you are required to keep Raj dependencies on the server in order to reduce current size JavaScript so make use of a server component when you want to add interactivity and inventory signers like on click and unchange make use of a client component when you make use of the use State and drive cycle effects like use State user reducer and use effect and mark the component as a client component when you make use of browser only apis make use of a client component when you use custom hooks that depends on state effects and browser only apis Mark the component as a client component and when you use a react class components and Mark those components as client components when importing client components it's recommended to move them to the bottom level of a tree where possible this helps to improve performance of the application we can import a client component normally by using the import statement or via plops but server components can be imported into a client component only via plops and here we have example code here instead of making the whole layout a client component we move the search bar logic which is interactive to a client component and then we bring it in into the layout using the import statement so it's possible to just import a client component normally using the import statement and by moving the interactive logic into a different component I will make other components like logo to be rendered on the server and thus improving performance then here we are trying to import a server component into a client component but this will not work because we are not allowed to use the import statement when we are bringing in the server component into a client component instead we can pass the server component as a child or as a prop of a client component we can do this by wrapping both components in another server component so as you can see here we have the page component which by default is a server component and we are wrapping both current component and the server component inside it and then where we have the client component we are passing the server component as a child and therefore when we go into client component we'll be able to receive the server component using the children plop and therefore we can be able not to return it inside our client component so that's it for this video and if you wish to see more next 13 video so I can subscribe and follow the link at the description section for the full next 13 playlist [Applause] foreign

Channel: Chaoo Charles

Views: 13,125

Keywords: chaoo charles, chaoocharles, chaoo, charles, next13, next.js 13, next.js, nextjs

Id: 7k4VNEYIF18

Length: 5min 16sec (316 seconds)

Published: Fri Apr 28 2023