(번역) How React server components work: an in-depth guide

원문: https://blog.plasmic.app/posts/how-react-server-components-work/#what-are-react-server-components

React 서버 컴포넌트(RSC)는 페이지 로드 성능, 번들 크기뿐만 아니라 가까운 미래에 React 애플리케이션을 어떻게 작성할지에 대해 큰 영향을 미치는 흥미로운 새 기능입니다. Plasmic 앱은 React를 통해 비주얼 빌더를 만들고 있고, 많은 고객이 Plasmic을 통해 성능이 중요한 마케팅 및 이커머스 사이트를 구축하기 때문에 React 성능에 큰 관심을 두고 있습니다. 따라서, RSC는 아직 React 18의 초기 실험 기능이지만 내부에서 어떻게 동작하는지 살펴봤습니다.

이곳에서 트윗 요약 또한 확인할 수 있습니다.

React 서버 컴포넌트가 뭔가요?

React 서버 컴포넌트를 사용하면 서버와 클라이언트(브라우저)가 협력해 React 앱을 렌더링할 수 있습니다. 일반적인 React 요소 트리를 생각해보면, 이 트리는 더 많은 React 컴포넌트를 렌더링하는 다른 React 컴포넌트로 구성되어 있습니다. RSC를 사용하면 이 트리의 일부 컴포넌트를 서버에서 렌더링하고 일부 컴포넌트는 브라우저에서 렌더링할 수 있습니다. 🤯

여기 React팀의 최종 목표를 나타내는 간단한 그림이 있습니다. 서버에서 렌더링 되는 컴포넌트가 주황색, 클라이언트에서 렌더링 되는 컴포넌트가 파랑색입니다.

그건 “서버 사이드 렌더링” 아닌가요?

React 서버 컴포넌트는 서버 사이드 렌더링이 아닙니다! 둘 다 이름에 “서버”가 들어가 있고 서버에서 작업하기 때문에 혼란스러울 수 있습니다. 그러나 둘을 별개의 독립된 기능으로 이해하는 것이 훨씬 쉽습니다. RSC를 사용하는데 SSR을 사용할 필요가 없으며 그 반대의 경우도 마찬가지입니다. SSR은 React 트리를 html 그 자체로 렌더링하기 위한 환경을 만듭니다.서버와 클라이언트 컴포넌트를 구분하지 않으며 동일한 방식으로 렌더링합니다!

하지만 SSR과 RSC를 결합해 서버 컴포넌트를 사용해 서버 사이드 렌더링을 수행하며 브라우저에서 적절하게 hydrate 될 수 있도록 할 수 있습니다. 이후 글에서는, 두 기능이 어떻게 결합해 작동하는지 이야기해보겠습니다. 하지만 지금은 SSR 대신 RSC에 집중해보겠습니다.

왜 RSC가 필요한가요?

React 서버 컴포넌트가 등장하기 전 모든 React 컴포넌트는 브라우저에서 동작하는 “클라이언트” 컴포넌트였습니다. 브라우저가 React 페이지를 방문하면 필요한 모든 React 컴포넌트에 관한 코드를 다운로드한 뒤 React 컴포넌트 트리를 구성하고 이를 DOM에 렌더링했습니다.(또는, SSR을 사용하는 경우 DOM에 hydrate를 수행함) React 앱은 상호작용이 가능하기 때문에 이벤트 핸들러를 추가하고, 상태를 추적하며, 이벤트에 대한 응답으로 React 트리를 변경하고 DOM을 효율적으로 업데이트 할 수 있습니다. 또한, 브라우저는 이런 작업을 하기에 좋은 무대입니다. 그럼 왜 우리는 무엇이든 서버에서 렌더링 하고 싶어 할까요?

서버에서 렌더링을 수행할 경우 브라우저에 비해 다음과 같은 이점이 있습니다.

• 서버는 데이터베이스, GraphQL 엔드포인트 혹은 파일시스템 같은 데이터 소스에 더욱 직접적으로 접근할 수 있습니다. 서버는 API 엔드포인트를 거치지 않고 필요한 데이터를 직접 가져올 수 있으며 일반적으로 데이터 소스와 더 가깝게 위치해 브라우저보다 더 빠르게 가져올 수 있습니다.
• 서버는 “무거운” 코드 모듈을 더욱 가볍게 이용할 수 있습니다. 예를 들어, 브라우저에서 마크다운을 html로 렌더링 하기 위한 무거운 npm 패키지를 항상 번들로 받은 뒤 사용하는 것 대신 서버에서는 이런 의존을 매번 다운로드 할 필요가 없습니다.

간단히 말해서 React 서버 컴포넌트는 서버와 브라우저가 각자 가장 잘 할 수 있는 것을 담당하게 하는 것을 가능하게 합니다. 서버 컴포넌트는 데이터 가져오기 및 콘텐츠 렌더링에 집중할 수 있고 클라이언트 컴포넌트는 상태 저장…