Client Component 경계 내부에서 Server Component를 직접 import하여 자식으로 사용할 때 발생하는 문제는 무엇이며, 이를 우회하는 패턴은 무엇인가요?

음, Client Component 안에서 Server Component를 직접 import해서 자식으로 사용하면 예상치 못한 문제가 발생할 수 있습니다. Next.js는 Server Component를 서버에서 렌더링하고, Client Component는 브라우저에서 렌더링하는데, 직접 import하면 Server Component가 클라이언트 번들에 포함되어 버립니다.

이렇게 되면 Server Component의 장점인 서버 측 데이터 접근이나 보안상의 이점을 활용할 수 없게 되고, 불필요하게 클라이언트 번들 크기가 커지는 문제가 생깁니다. 또, Server Component에서만 사용할 수 있는 코드가 클라이언트에서 실행되면서 에러가 발생할 수도 있고요.

이 문제를 해결하는 일반적인 방법은 컴포넌트 합성 패턴을 사용하는 겁니다. Server Component를 Client Component의 children prop으로 전달하는 거죠. 예를 들어, Server Component에서 데이터를 가져와서 Client Component에 props로 전달하고, Client Component는 단순히 UI를 렌더링하는 방식으로 분리하는 겁니다. 이렇게 하면 Server Component는 서버에서 안전하게 실행되고, Client Component는 필요한 데이터만 받아서 렌더링할 수 있습니다.