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

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Intro
0:47 Client C. in Server C.
1:52 Server C. in Client C.
4:29 Context Provider Example

#webdevelopment #programming #coding

[clickbaitpolice]

for over a week I was very confused about this. Frantically searching. only by chance did I stumble on this. there's so much misinformation online. people just not explaining anything. ty so much for the clarity

[TheGrandChieftain]

This is something every Next developer should know because you’re bound to run into implementing dark mode or using React Query. If you’re running into hydration errors, I’d just add to return {children} inside a fragment until the client component is mounted.

[soganox]

I was messing with this pattern over the last couple of days and my mind is blown. Thank you!

[kqpro]

Very nicely explained. Thanks for this video!

[qkdrk]

This was what I was looking for!!! Thank you so much man!

[lwexnfd]

Thanks for the explanation! Very clear.

[michael]

It was actually this simple, thanks for the explanation!

[dawid_dahl]

I’ve been so confused by this. Thank you! 🙏🏻🙏🏻🙏🏻

[lakshitsagar]

Thanks a lot man, you cleared my doubt so well

[Nin_Cada]

Thanks a lot man, you explained it really well.

[cqrefwt]

Thanks so much for this, really helped to understand how the provider context API still allows children to be server components.

[michael]

One thing to note, it doesn't necessarily need to be passed through the children, but to be more exact, the server component must be passed through the client component props. (that includes the children component as well)

[aymenbachiri-yhhd]

Thanks, please keep posting videos like this, please add SEO in Next.js

[lwnipfe]

I was struggling like for 3 days in a similar problem in my project. after watching this video the problem solved just in 5 mins

[reactDevelopment]

so can we pass a data from client component to a server component like that?

[damiantriebl]

I have a state in zustand on the client, and I can another state on the server, is there a possibility that when I change the state of the client and revalidate it on the server?

[chrtravels]

I haven't tested it yet but wondering if we can then use Suspense on the server component or check if the ServerComponent exists and if not show a loading spinner or skeleton. Will give it a test.

[ardianhotii]

Okay great, but what if that server component in that client component is async and its getting some data from an external api(uses async/await), I'm doing this with modals where i need to send some data from a server component that is rendering the modal of the form(both client components) but this server component is inside the modalProvider(client component), and its not working - Error: async/await is not yet supported in Client Components , how do I make this work because I dont want to fetch data in the form component the old ugly way with useEffect, hope you understand what I said

[CarlosEduardo]

Hi. I enjoyed your video and faced a more specific problem. I have a server component that use { cookies } from next/headers to queries the application cookies to display the user's image. One of the parents of this component is a client component. Because of this, Next was trying to render it on the client side, causing the error.

In this specific component, I had to use the 'use server' directive and make it an asynchronous component. Only then was I able to achieve what I needed.

[abdullahzafar]

Slightly related, If you just want a server side function inside a client component, you can just easily export that function from another file and 'use server' on-top of it

This way if you call that function inside a client component, that function will run on server side and just return results on client

Beautiful, isn't it ? 😁