클라이언트 컴포넌트는 서버 컴포넌트를 직접 import 할 수 없음 (Next.js)

 

 

// app/page.tsx (서버 컴포넌트 - 기본)

import MyClientComponent from './MyClientComponent';

export default function Page() {
  return <MyClientComponent />;
}

 

// app/MyClientComponent.tsx

'use client';

import MyServerComponent from './MyServerComponent'; // ❌ 에러 발생

export default function MyClientComponent() {
  return (
    <div>
      <MyServerComponent /> {/* ❌ 이건 안 됨 */}
    </div>
  );
}

 

 

이유 : 클라이언트 컴포넌트는 브라우저에서 실행되는데, 서버 컴포넌트는 서버에서 실행되어야 하므로 서버 컴포넌트를 브라우저로 번들링 불가

*번들링 : 여러 개의 JS/TS, CSS 파일 등을 하나 또는 몇 개의 파일로 합쳐서 '브라우저에서 실행 가능하게' 만드는 과정


해결 방법 : children으로 전달하기

* 왜 import 는 불가능하지만 children으로 전달은 가능한가
- 렌더링 시점, 책임 분리

클라이언트 컴포넌트에서 서버 컴포넌트 import 시, 
서버 컴포넌트를 브라우저에서 실행할 코드로 포함 시키려고 시도함(번들링)
-> Next.js 자체에서 에러로 막음

 

 

 

 

* 클라이언트 컴포넌트가 아닌, 서버 컴포넌트에서 children으로 넘길때의 동작

// app/page.tsx
import ClientComponent from './ClientComponent';
import ServerComponent from './ServerComponent';

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

 

서버에서 ServerComponent 우선 실행 -> HTML 엔더링

<ClientComponent>
  <div>서버 컴포넌트 내용</div> ← 이미 렌더링됨
</ClientComponent>

으로 동작하게 됨
브라우저에서는 ClientComponent만 실행

 

 

 

 

결론

// 서버 컴포넌트 (기본값)
import MyClientComponent from './MyClientComponent';
import MyServerComponent from './MyServerComponent';

export default function Page() {
  return (
    <MyClientComponent>
      <MyServerComponent /> {/* 이렇게는 가능 */}
    </MyClientComponent>
  );
}