Server Component vs Client Component — 경계 이해가 전부다

💡 Next.js App Router에서는 `'use client'` 지시어가 없는 모든 컴포넌트가 기본적으로 Server Component입니다. 이는 기존 React(CRA)와 가장 큰 차이점입니다. Server Component는 서버에서 실행되어 HTML로 스트리밍되며, JavaScript 번들에 포함되지 않아 클라이언트로 전송되는 코드 양을 줄일 수 있습니다.

💡 Server Component는 서버에서 실행되므로 데이터베이스에 직접 접근하거나 비밀 API 키를 사용해도 클라이언트에 노출되지 않습니다. 반면 이벤트 핸들러(onClick), React 훅(useState), 브라우저 API(localStorage, window)는 모두 브라우저에서만 실행 가능하므로 Client Component에서만 사용 가능합니다.

💡 `'use client'`는 "이 파일부터 클라이언트 경계가 시작된다"는 의미입니다. 해당 컴포넌트뿐만 아니라 그 자식 컴포넌트들도 모두 클라이언트에서 실행됩니다. 이 경계 이하의 모든 코드는 JavaScript 번들에 포함되어 브라우저로 전송됩니다. 따라서 `'use client'`는 최대한 트리의 아래쪽(leaf 컴포넌트)에 배치하는 것이 성능에 유리합니다.

💡 Client Component 안에 Server Component를 직접 import하면 그 Server Component가 Client Component로 변환됩니다. 이를 방지하려면 Composition 패턴을 사용합니다: Server Component를 `children` prop으로 Client Component에 전달합니다. `<ClientWrapper><ServerComponent /></ClientWrapper>` 형태로 사용하면, ClientWrapper는 Client이지만 그 children(Server Component)은 서버에서 렌더링됩니다.

💡 `'use client'`가 붙은 컴포넌트는 브라우저에서 실행되므로 서버 전용 모듈(Prisma, DB 연결 등)에 접근할 수 없습니다. 이 코드는 빌드 에러 또는 런타임 에러를 발생시킵니다. 올바른 방법은 데이터 패칭을 Server Component에서 처리한 후, 결과를 props로 Client Component에 전달하는 것입니다. `server-only` 패키지를 사용하면 클라이언트에서 실수로 import할 경우 명시적 에러를 발생시킬 수 있습니다.