😲 I Was WRONG About Next.js Client Components 

Also curious about this

Why wouldn't it be?

Yes, referencing the docs "You can pass Server Components as a prop to a Client Component." Docs link: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

I'd say _do not import a server component into a client component_ . Some server code (Node.js) won't run in the client.

A form should be a client component for interaction. It would be strange to create a form server-side that was prefilled. Why would you need the form at that point? That said, quoting the docs "You can pass Server Components as a prop to a Client Component." Reference: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

@@DaveGrayTeachesCode maybe saved draft.. i honestly dont know what im saying so forget it. Also havent finished your next tutorial..

I'm referring to _components_ as the docs do: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components ..not sure what you are looking at 👀

​@@DaveGrayTeachesCode Ok maybe the confusion is regarding "including child components". What they mean here is any imported component module that are then referenced directly inside the client component, those whether those have "use client" or not, they will be imported as client-side. But essentially the missing part here is that you cannot import a Server Components module into Child Component module, and therefore have inverse it.

Maybe so - it isn't a correction for another video, but I think it could be a common misconception.

@@DaveGrayTeachesCode SAME HERE

You are not limited to {children}. See the docs examples: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

Thanks Dave!! Though could I maybe map the prop in a situation where I’m passing multiple server components so I can get each individually

No. Using a provider will not make all children client components. If this short video did not explain well enough, please reference the docs here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

@@DaveGrayTeachesCode thank you so much. So if I use Redux toolkit and wrap my children then it won't make it "client" components

Yes. Reference: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

Not specifically an app router thing. Next.js is constantly updated but this is a key to how Next.js handles server and client components.

I didn't, but sometimes RU-vid automatically does.

@@DaveGrayTeachesCode sureee

This does not mean that server code will be seen in the browser. I do not see a danger.

@@DaveGrayTeachesCode wrong choice of word. I want to mean they are constantly changing, many things are not obvious, hidden in somewhere. It's normal because they are experimenting.