(번역) 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에 집중해보겠습니다.