[팀미팅 질문] 서버 컴포넌트와 클라이언트 컴포넌트의 차이와 용례

최종 수정 : 2024-06-03

Q. 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 설명해주시고 각각을 설정하는 기준점은 무엇인가요??

 

우성, RSC와 RCC를 적재적소에 배치하여 개발하려는 접근이 필수적이다. 이를 위해서는 둘의 차이를 알고 어떤 상황일 때 사용하는지에 대한 이해가 필요하다.

 

React Server Component(줄여서 RSC)는 React18부터 도입된 개념으로, 말 그대로 서버에서 동작하는 컴포넌트를 가리킨다. 서버 컴포넌트가 있는 것처럼 당연히 클라이언트 컴포넌트도 존재한다. 이전 버전에서 사용했던 모든 컴포넌트가 바로 클라이언트 컴포넌트다.

 

서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 데이터를 가져오는 방식이다. 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐에 따라 달라진다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트로 전달되고, 클라이언트 컴포넌트는 클라이언트가 js 번들을 다운로드 받은 후 해석하게 된다.

 

서버 컴포넌트는 주로 데이터 처리와 백엔드 로직을 수행하는 데 사용된다. 사용자 요청을 받아 처리하고 그 결과를 클라이언트 컴포넌트로 전송하는 역할을 수행한다. 예를 들어, 데이터베이스 쿼리, 사용자 인증, 데이터 캐싱과 같은 작업이 서버 컴포넌트에서 주로 처리된다.

 

반면, 클라이언트 컴포넌트는 사용자와의 상호작용을 담당한다. 브라우저에서 실행되며, 사용자의 입력을 받아 서버에 요청을 보내고, 서버로부터 받은 데이터를 바탕으로 화면에 정보를 보여준다. 동적인 웹 페이지에서 자주 볼 수 있는 슬라이더, 버튼 클릭 반응 등이 클라이언트 컴포넌트의 예라고 할 수 있다.

 

기본적으로 다음 중 하나 이상에 해당하지 않는 한 모든 컴포넌트에는 항상 서버 컴포넌트를 사용하는 것이 권장된다.

1. 브라우저와 상호작용이 필요하거나, 이벤트 리스너(onClick(), onChange() 등)가 필요할 때
2. 상태 및 라이프사이클 효과(useState(), useReducer(), useEffect() 등), 즉 react hook을 사용할 때
3. 브라우저 전용 API를 사용할 때 (window, document..)
4. React 클래스 컴포넌트를 사용할 때

---

참고 자료

https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0

Next) 서버 컴포넌트(React Server Component)에 대한 고찰

 

https://reactnext-central.xyz/blog/nextjs/composition-patterns#%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%97%AD%ED%95%A0%EA%B3%BC-%EC%82%AC%EC%9A%A9-%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4

Next.js에서 서버와 클라이언트 컴포넌트의 유연한 렌더링 조합 및 최적화 전략