[TIL] 서버 컴포넌트에 대해서 설명해주세요.

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

 

오늘의 질문은 서버 컴포넌트에 대해 설명하는 것이다.

 

서버 컴포넌트는 리액트 18 버전에서 도입된 새로운 기능이다.

기본적으로 클라이언트에서 실행되는 기존의 리액트 컴포넌트와 다르게 서버에서 렌더링되는 컴포넌트를 말한다.

서버에서만 실행되기 때문에 브라우저 쪽 번들 크기를 줄이고, 초기 로딩 속도를 개선하는 데 큰 장점이 있다.

 

예를 들어, 서버 컴포넌트는 데이터베이스나 API에서 데이터를 가져오는 작업을 서버에서 처리하고, 그 결과를 클라이언트로 보낼 수 있어서 클라이언트와 서버 간의 데이터 통신을 줄일 수 있다. 그래서 클라이언트는 필요한 HTML과 JSON만 전달받아 렌더링하면 된다.

 

또한, 서버 컴포넌트는 보안 측면에서도 강점이 있습니다. 데이터베이스 연결 정보나 API 키 같은 민감한 정보를 클라이언트로 보내지 않아도 되는 구조라 안전하게 데이터를 다룰 수 있다.

 

리액트에서는 서버 컴포넌트를 클라이언트 컴포넌트와 함께 사용할 수 있도록 설계했다. 클라이언트 컴포넌트는 인터랙션이 필요한 UI를 담당하고, 서버 컴포넌트는 데이터 중심의 UI를 담당하는 식으로 역할을 분리할 수 있다.

 

결론적으로, 서버 컴포넌트를 활용하면 성능 최적화와 보안 개선, 그리고 개발자 경험 측면에서 많은 이점을 가져다줄 수 있는 기능이라고 설명할 수 있다.

 

서버 컴포넌트의 단점

 

첫 번째로는 서버 의존성 증가. 서버 컴포넌트는 이름 그대로 서버에서 실행되기 때문에, 서버가 반드시 필요하다. 따라서 서버가 다운되거나 응답 시간이 느려지면 클라이언트에서도 영향을 받게 된다. 특히, 정적 사이트나 서버리스 환경에서 작업하려는 경우에는 사용할 수 없거나 제약이 있을 수 있다.

 

두번째로는 사용자 경험과 인터랙션 문제. 서버 컴포넌트는 클라이언트 컴포넌트와 결합해서 사용해야 하는데, 이 과정에서 복잡한 사용자 인터랙션(예: 실시간 업데이트, 드래그 앤 드롭 등)을 처리하기 어렵다. 서버 컴포넌트는 주로 정적인 데이터나 렌더링에 적합하기 때문에, 클라이언트 쪽의 인터렉션이 필요한 경우에는 한계가 있을 수 있다.