You can interleave server and client components.

Thanks

Btw the docs go into detail about this: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components

well, I have a diferent view from @Asian black bear
in Next.js, if you use "use client" in a parent component, all child components will also be treated as client components. The "use client" directive indicates that the component should be rendered on the client side, and this behavior propagates down to its children.

This is not a matter of opinion. Children of client components can still be server components as they are prerendered on the server and slotted in afterwards. They don't miraculously become client components with their usual set of features just because a parent component is a client component, they are still server components after all.

here is the screenshot from docs.

Can read here for an explanation why children of client components can still be server components: https://nextjs-faq.com/client-components-wrapping-server-component-children#why

Only components imported into client components become client components.

Btw you can only mark one message as solution so I remarked to the one most deserving

👏