React Server Component(RSC) 즉, 서버 컴포넌트는 React18부터 도입된 개념으로, 말 그대로 '서버에서 동작하는 컴포넌트'를 가리킨다.
‘서버 컴포넌트가 있으니 그러면 클라이언트 컴포넌트도 있겠네?‘라고 생각한다면 당연히 그렇다. '이전 버전에서 우리가 사용하던 모든 컴포넌트'가 바로 React Client Component(RCC), 클라이언트 컴포넌트다.
서버 컴포넌트는 무엇일까?
서버사이드 렌더링(SSR)은 서버에서 작업을 마친 즉, 렌더링을 마친 페이지를 클라이언트에게 먼저 보낸다.
이 페이지는 자바스크립트가 연결되지 않아 사용자와 상호작용이 불가능한 상태인데, 사용자와 상호작용이 가능하도록 하는 과정을 하이드레이션(Hydration) 이라 한다.
그럼 만약 하이드레이션이 필요하지 않은 컴포넌트가 있다면 어떨까? 단순히 텍스트만 보여주는 컴포넌트 같은 경우 말이다.
이런 경우 서버에서 렌더링이 된 이후에 추가적인 작업이 필요 없다고 판단해 구분해 놓을 수 있는데, 이를 서버 컴포넌트라 한다.
서버 컴포넌트는 사용자와 상호작용을 하지는 않지만 무거운 라이브러리를 사용하는 경우 가장 큰 효과를 볼 수 있다.
서버사이드 렌더링(SSR)이 아니다?
(☝🏼 서버 사이드 렌더링(SSR), 클이언트 사이드 렌더링(CSR)에 대해 좀 더 자세히 알고 싶다면 이전 포스팅을 봐주세요!)
서버 컴포넌트는 정확히 말해서 SSR이 아니다. 물론 둘 다 명칭에 '서버'가 포함돼 있어서 혼란의 여지가 있다. 서버 컴포넌트를 사용하면 SSR을 사용할 필요가 없고, 반대의 경우도 마찬가지다.
SSR은 응답 받은 트리를 raw html로 렌더링하기 위한 환경을 시뮬레이션 한다. 즉, 서버와 클라이언트 컴포넌트를 별도로 구별하지 않고 동일한 방식으로 렌더링한다.
서버 컴포넌트가 왜 필요할까?
서버 컴포넌트 이전에는, 모든 React 컴포넌트는 '클라이언트' 컴포넌트 였으며, 모두 브라우저에서 실행된다.
브라우저가 React 페이지를 방문하면, 필요한 모든 React 컴포넌트 코드를 다운로드 하고, React 컴포넌트 트리를 만든 후 DOM에 렌더링한다. (SSR을 사용하면, DOM에 하이드레이션만 진행한다.)
브라우저는 이벤트 핸들러를 부착하고, 상태를 추적하고, 이벤트에 따른 응답 트리 변경 및 DOM의 효율적인 업데이트 등 React 애플리케이션이 인터렉션 할 수 있도록 처리할 수 있는 좋은 곳이다.
그런데, 우리가 왜 서버에서 무언가를 렌더링 하려고 하는 걸까?
브라우저에 대신, 서버에서 렌더링을 한다면 다음과 같은 장점을 얻을 수 있다.
이야기 하기에 앞서, 페이지를 렌더링하는 일반적인 React 컴포넌트 트리를 생각해보자. 이 트리에는 React 컴포넌트가 있고, 이 컴포넌트는 또다른 React 컴포넌트를 렌더링한다.
서버 컴포넌트를 사용하면, 서버와 클라이언트(브라우저)가 React 애플리케이션을 서로 협력하여 렌더링 할 수 있다.
서버 컴포넌트를 사용하면 트리의 일부 컴포넌트는 서버에서 렌더링하거나, 일부 컴포넌트는 브라우저에서 렌더링 하는 등 처리를 할 수 있다.
서버는 데이터 원본에 직접 접근 할 수 있다.
서버는 공용 API 엔드 포인트를 거치지 않고 데이터를 직접 가져올 수 있고, 일반적으로 데이터 소스와 더 가깝게 배치되어 있으므로 브라우저보다 더 빠르게 데이터를 가져올 수 있다.
브라우저는 자바스크립트 번들링된 모든 코드를 다운로드 해야하는 것 과 달리, 서버는 모든 의존성을 다운로드 할 필요가 없기 때문에 (미리 다운로드 해놓고 수시로 재사용이 가능하므로) 무거운 코드 모듈을 저렴하게 사용할 수 있다.
즉, 서버 컴포넌트를 활영하면 서버와 브라우저가 각자 잘 수행하는 작업을 처리할 수 있게 된다.
서버 컴포넌트는 데이터를 가져오고 콘텐츠를 렌더링하는데 초점을 맞출 수 있으며, 페이지 로딩 속도가 빨라지고 자바스크립트 번들 크기가 작아져서 사용자의 환경이 향상될 수 있다.
클라이언트와 서버 컴포넌트로 나누기
그렇다면 컴포넌트를 어떻게 서버 컴포넌트인지 클라이언트 컴포넌트인지 구분할 수 있을까?
React에서는 이를 확장자로 구별하는 방식을 택했다.
파일명.server.jsx 면 서버 컴포넌트이고, 파일명.client.jsx면 클라이언트 컴포넌트다.
만약 둘다 아니라면, 이 컴포넌트는 서버나 클라이언트 컴포넌트 양쪽 모두에서 가능한 것이다.
서버 컴포넌트와 클라이언트 컴포넌트의 가장 큰 차이점은 컴포넌트가 렌더링되는 장소가 서버냐 클라이언트냐의 차이다.
서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트로 전달되고, 클라이언트 컴포넌트는 클라이언트가 자바스크립트 번들을 다운로드 받은 후 해석하게 된다.
여기에서 특히 기억해야 할 것은, 클라이언트 컴포넌트가 서버 컴포넌트를 import 할 수 없다는 점이다. 이는 서버 컴포넌트를 브라우저에서 실행할 수 없기 때문이다.
※ 참고 자료
리액트 서버 컴포넌트의 동작 방식
React Server Component: SSR최적화하는법 2분만에 알아보기
Next) 서버 컴포넌트(React Server Component)에 대한 고찰
React 서버 컴포넌트 / RSC의 도입 배경과 장점
