React 의 RSC, RCC 에 대하여 (with Next.js)

React 18 버전이 출시 된 후 Next.js 에서는 app dir 기능이 도입되어 React 의 RSC, RCC 기능을 사용할 수 있게 되었습니다. 이번 포스트에서는 최근 화두인 RSC, RCC 에 대해 한번 정리해보고자 합니다.

 

RSC 란?

RSC 란, React Server Component 의 줄임말로 서버에서 렌더링 되는 컴포넌트를 의미합니다. 서버 컴포넌트는 async 함수로 선언하고 내부에서 await 를 사용하여 비동기 데이터를 가져와 이를 렌더링 하는 것이 가능합니다. 즉, 비동기 컴포넌트가 되는 것이죠. 기존 Next.js 에서는 서버에서 데이터를 fetch 해오고 이를 컴포넌트에 전달하기 위해서는 페이지 단위로 페이지의 최상단에서 getServerSideProps 함수를 사용하여 이를 하위 컴포넌트에 일일이 넘겨줘야 했지만, 서버 컴포넌트가 도입되면서 이제는 페이지의 최상단이 아닌 각각의 컴포넌트 안에서 비동기 데이터를 가져와 이용하는 것이 가능해진 것입니다. RSC 는 다음과 같은 특징이 있습니다.

• RSC 에서는 useState, useEffect 와 같이 클라이언트에서 사용 되는 훅을 사용할 수 없습니다. (직렬화가 되어야 하므로)
• RSC 에서는 onClick, onFocus 와 같은 이벤트 핸들러는 사용이 불가능합니다. (직렬화가 되어야 하므로)
• RSC 가 렌더가 완료되기 전까지 클라이언트에서는 React 의 Suspense 로 RSC 자리에 다른 컴포넌트를 대신 보여주는 것이 가능합니다. 
• RSC 에서 사용되는 패키지들은 모두 서버에서 import 되고 서버에서만 사용되기 때문에 js 번들로 클라이언트에 전달되지 않습니다.

 

RCC 란?

RCC 란, React Client Component 의 줄임말로 클라이언트에서 렌더링 되는 컴포넌트를 의미합니다. Next.js 같은 경우에서 RSC 는 서버에서 html 로 한번 렌더링 되고 서버는 컴포넌트의 html 과 js 번들링 파일을 클라이언트에게 내려주게 되고 클라이언트에서는 서버로부터 받은 html 을 화면에 렌더하고 여기에 js 번들을 적용하는 과정인 "하이드레이션" 이 일어나게 됩니다. RCC 는 다음과 같은 특징이 있습니다.

• RCC 에서는 useState, useEffect 와 같이 클라이언트에서 사용 되는 훅을 사용할 수 있습니다. (클라이언트에서 동작하므로)
• RCC 에서는 onClick, onFocus 와 같은 이벤트 핸들러 사용이 가능합니다. (클라이언트에서 동작하므로)
• RCC 는 서버에서 렌더링 되어 나온 html, 해당 컴포넌트에서 import 해온 각종 패키지들의 js 번들 파일을 클라이언트에게 내려주고 클라이언트는 해당 html 을 렌더하면서 js 를 적용해나가는 하이드레이션 과정이 진행됩니다.
• RCC 에서 사용되는 패키지들은 모두 클라이언트에서 사용되는 것이기 때문에 js 번들로 클라이언트에 전달됩니다.

 

RSC 와 RCC 동작 과정 

1) 서버가 요청을 받습니다. (ex. 사용자가 브라우저 주소창에 주소를 입력하여 접속 시도)

 

2) 서버는 해당 페이지에서 그려야 할 서버 컴포넌트와 클라이언트 컴포넌트들을 tree 로 구성 및 JSON 형태로 직렬화 하고 이를 토대로 html 을 생성합니다. (만약 이 때, Suspense 로 감싸진 Promise 를 반환하는 서버 컴포넌트일 경우에는 해당 컴포넌트가 렌더 완료 될 때까지 기다리지 않고 해당 자리에 template 을 대신 위치시키고 진행해 나갑니다.)

 

3) 생성된 html 과 클라이언트 컴포넌트의 하이드레이션을 위한 js 번들 파일들을 클라이언트에 전달합니다.

 

4) 클라이언트에 html 렌더링 되고 클라이언트 컴포넌트들은 js 가 로드되며 하이드레이션이 진행됩니다.

 

5) Suspense 로 감싸져 있는 서버 컴포넌트가 있을 때, 해당 컴포넌트가 서버에서 렌더링이 완료되었다면 서버에서는 렌더링된 결과를 특별한 형태로 직렬화 하여 클라이언트에 전달합니다.

 

6) 클라이언트는 서버로부터 받은 특별한 형태의 데이터를 파싱하여 이를 html 로 역직렬화 하여 DOM 에 추가합니다.

 

7) 해당 서버 컴포넌트가 렌더되어야 할 자리에 렌더링 되어 있던 template 이 제거되고 서버 컴포넌트가 최종적으로 렌더링 되게 됩니다.

 

 

마치며

여러 자료들을 참고해가며 리액트 서버 컴포넌트와 클라이언트 컴포넌트에 대해 정리를 한번 해보았습니다. 만약 위 내용 중에 잘못된 부분을 발견 하셨다면 댓글로 의견 남겨주시면 감사하겠습니다.

 

참고자료

https://vercel.com/blog/understanding-react-server-components

Understanding React Server Components – Vercel

https://github.com/reactwg/server-components/discussions/4

Why do Client Components get SSR'd to HTML? · reactwg/server-components · Discussion #4

https://www.plasmic.app/blog/how-react-server-components-work

How React server components work: an in-depth guide

https://nextjs.org/learn/foundations/how-nextjs-works/rendering

Learn | Next.js

https://jser.dev/react/2023/04/20/how-do-react-server-components-work-internally-in-react/

How do React Server Components(RSC) work internally in React?

https://www.youtube.com/watch?v=jEJEFAc8tSI

https://www.youtube.com/watch?v=lJxU3-61F2I