Server Components in Client Components?? (React / Next.js)

there's a major misconception which is that you cannot have server components in a client component and that's actually wrong you can easily do that in next.js let's take a look at an example so what we're going to create here is we're going to have the server components going to be a page and in there we're going to have a client component pretty standard right maybe you have a page in next.js and in there you can have client components of course but now what if you want to have a server component in that client component a lot of people think that's not possible or if you do that that it will automatically become a client component as well and that's not true so let's let's take a look at how that would work right so you can imagine a provider component usually that's a client component and you wrap a lot a big part of your app with that client component so you would think oh maybe everything then becomes a client component and that's not true right so you can have a client component and in there you can still have server components so let's take a look at how that would work let's start from a clean slate there so I have a page component and this is just displaying some text so this text is in a server component and I'll just ask this is the page component now this is a server component because everything by default in the app directory in XTS is a server component as this is a server component now we want to have let's say a client component in here let's quickly create a client component I will just call that example client component and I'll say example client component and I'm going to mark this as a client component I'm going to use the use client directive and I'm going to copy this text here right so I will just add the paragraph in here and I will say this text is from a client component I'll remove the page here let me also add some background color to this div so we can see it here alright so now I'm going to save here this is just a client component now we need to add that here so we need to import this I'm just going to write it here so it's going to be an example clients component I've imported it here and now if I save here let's see what we got so now you see we have a server component and in there we have our example clients component now what if we want to have a server component in this client component so now let's create another server component so I'm just going to say example server component and this will just be a paragraph with a background color this text is from a server component we don't need this import here right so here I don't have use client at the top it's not inherently a client component so now you may think we need to import it here in this example class component now if we would do this example server component if I would import this here it actually becomes a client component right so component becomes a clients component if you add use client or if you import it into a component that is a client component right so it's not really about the rendering tree it's more about these Imports right so here we're importing this into a client component so this automatically becomes a client component as well that's not what we want right so we want to keep this a server component so we cannot do it this way right so you cannot just add it like this I mean you can do it but it will be a client's component but we want this to stay a server component so we cannot import it in here so the trick here if we go to the page here where we have this is server component this is the client component instead of using the sound closing tag we're going to use an opening and closing tag so let me make this a little bit wider right so now this will work the same way you can write it like this whatever I add in between here this will be available to us in the children prop right so here I'm just adding text here and I get a complaint from typescript because it's saying you know this type with children and we are not accepting that here yet so in this client component now we need to accept that there could be some child's elements in there or some some stuff in here essentially that we get as a child right and we want to type this you can type it like like this and then we can output that below here let's say so you can just you can just pass it through and so whenever this client component gets in between it's going to be assigned to Children here and we're just passing that through and we're just rendering it here right so if I do this and save here you can see now we get this blah blah blah here all right so the trick here is not to use blah blah blah here but to actually use net server component it's not really it's not really a trick I mean this is how it's supposed to work right so I can just write my server components in here I've imported it here now this is still serve component this page components right so I can import this component in here and it will it will stay a server component and then I can just render it in between here and now when I save here you can see that we get the result that we're looking for so now what's going to happen is the server component is the children of this client component here right so that's going to be here and we're just rendering it like here if you want to have a server component in a client component you have to use this children pattern this is the result that we get so we have a server component and in there we have a client component and then in there we have another server component all right so let me give you a more realistic example so typically if you have a contacts if you're using the context API maybe you're keeping track of the theme so we can have some theme provider components right and it could look something like this we have this theme provider it's the components it's keeping track of the state of the theme and we're using use States for that right that's client-side functionality so we need to make this a client component right so this is now clients component here and then we're using this create contacts and then this context provider and it's not really important here the important Point here is that this is a client component and typically you want to wrap you know pretty big parts of your app with this theme provider so that you know a lot of components have access to the value that you're passing through here right so typically what you would do is then you would go to your layout file and here this layout file with the children here this is going to be the pages here that's not really important but the important part is typically what you want to do here is you want to have theme provider which is a client component you can now wrap basically your entire app with this theme provider right and now the idea is some people think that well this is a client component and we're basically putting everything on our entire app in there so now everything in our app is basically a client component and that's not true as we saw here right so here we saw a server component in a cloud component but you have to use this children prop so this theme provider is indeed accepting children here and it's just passing through the children like that right so you can have this theme provider being a cloud component and then in there you can still have server components right so this is a major misconception with these provider components that you know you shouldn't use them because then you can gonna make your entire app all client components and that's not true all your components can still stay server component as long as you use the children pattern you can easily Nest server components in client components a component only becomes a client's component if you add use client at the top or you import it into a component that's already a client component so if I would import some other components here right this example server components now I'm making this component a client component as well right so the name is still server component but it's going to become a client component because I'm importing it into a component that is a that's already a client component right so a bit tricky perhaps check out my react nextges course if you want to be a professional next or react developer make sure also that you've mastered the fundamentals those are both JavaScript as well as CSS if you want to be a professional developer thanks for watching I hope it was helpful and see you in the next one bye

Channel: ByteGrad

Views: 11,746

Keywords: react server components, react client components, use client

Id: 9YuHTGAAyu0

Length: 6min 49sec (409 seconds)

Published: Wed Jul 26 2023