[ Nextjs14 ] - 클라이언트 컴포넌트 안에있는 서버 컴포넌트 , Passing Server Components to Client Components as Props , Client components within Server components

Nextjs로 다크모드를 적용하던 중 다음과 같은 의문이 생겼다. 
 

'use client'

import { ThemeProvider } from 'next-themes';

interface ThemePropsInterface {
    children?: JSX.Element | Array<JSX.Element> | React.ReactNode;
}

export default function Providers(props:ThemePropsInterface) {
    const {children} = props;

    return (
        <ThemeProvider attribute='class'>{children}</ThemeProvider>
    )
}

위의 코드에서 Provider는 클라이언트 컴포넌트인데 이걸로 감싼 children에 해당하는 컴포넌트는 모두 클라이언트 컴포넌트가 되는게 아닐까 ?  결국 SSR이 없어지고 Nextjs를 쓰는 이유가 없어지는게 아닌가 ? 라는 생각을 했다.

 

결론부터 말하자면 클라이언트 컴포넌트가 되는게 아니었다. 

 

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

Rendering: Composition Patterns | Next.js

공식 문서에서는 다음과 같이 설명하고 있다. 

위의 설명과 같이 클라이언트 컴포넌트에 children으로 배치시킨다면 서버 컴포넌트가 분리되어 독립적으로 렌더링 될 수 있다.