Help transitioning to App Router. Should I be avoiding client components as early as possible?

[orchid mirage]

In App Router, is it the case that the moment I use a client component then all sub components are no longer server rendered?

There are traditionally some things we put early on in the root like context providers for our own state or other libraries.

Is the general shift to move this to the leaves where possible and/or avoid using these things? This looks to me like prop drilling more frequently, avoiding state management early on, and avoiding libraries that require a root code insertion.

Any tips on switching to the new style of thinking would be nice.

[cursive bridge]

No thats not correct. You can use providers inside the root; pages will still remain server components. See https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components

Components imported to client components become client components, but pages are not imported to layouts so they can still function as RSC just fine

[orchid mirage]

So are server components rendered independently from parents, which is how they're optimized?

I was thinking that if a component was a client component and it renders server components then technically they all become client components. (Guess this is not the case)

[cursive bridge]

Yes, you can put it that way. page.tsx and layout.tsx are rendered independently then the content of page.tsx is passed as children to layout.tsx