[Next.js 13] 서버컴포넌트와 클라컴포넌트 구분

Question

Next.js13을 처음으로 도입하여 사이트를 개발 중인데, 궁금한 점이 생겨 질문 올립니다.

처음부터 서버컴포넌트와 클라이언트 컴포넌트를 구분하며 개발을 하나요?
아니면, 우선 대부분 클라이언트 컴포넌트로 구현하고 점차 서버 컴포넌트로 변경하나요?

강용석 · Answer

Next13 에서는 모든 컴포넌트가 기본적으로 서버컴포넌트 입니다.
때문에 클라이언트컴포넌트를 사용하려면 use client 를 컴포넌트에 선언해줘야합니다.

클라이언트 컴포넌트가 필요한 상황에서만 선언해서 사용하는 편입니다.
사용자와 상호작용이 필요하거나
브라우저의 클라이언트기능을 활용해야한다거나
훅을 사용해야하거나

이런 상황이 아니라면 번들사이즈나 렌더링 최적화의 이점을 가져가기위해 기본적으로는 서버컴포넌트를 사용하는것이 좋다고 생각합니다.

Ed · Answer

구분하여 만듭니다 애초에 그렇게 만들라고 13버전이 나온 겁니다!(공식문서 읽자) 가능한 클라컴포들을 트리 구조상 리프쪽으로 배치하면 성능상 이점을 얻을수 있습니다(무조건은 아님)

김하림 · Answer

저는 서버 컴포넌트를 기본적으로 사용하고, 클라이언트 컴포넌트가 필요할 때 `use client;`를 붙여서 구분합니다.

제가 경험한 클라이언트 컴포넌트가 필요한 상황은 사용하는 라이브러리(ex: 디자인 시스템)가 Next.js의 서버 컴포넌트 대응을 안하고 있거나, 이벤트 핸들러를 붙여야 하는 등의 상황이 있었습니다.

서버의 자원을 활용할 수 있는 Next.js의 장점을 고려해서, 서버 컴포넌트를 최대한 활용하는 방향으로 아키텍처를 구성하시면 좋을 것 같습니다 :)