React 18에서 React Server Component가 추가가 되었다. 그리고, Next.js 13 App Routing에서는 이 Server Component를 활용할 수 있게 되었다.

React Server Component가 뭔데?

: Javascript 번들에 포함되지 않고 SSR을 보완하는 중간 추상화 렌더링

Server Side Rendering과 Server Component(이하 RSC)의 차이가 뭔데?

SSR은 서버단에서 데이터를 fetching하고, HTML을 렌더링하여 브라우저에 보내주는 방식이다. 그 다음 전달받은 JS번들링을 연결하는 Hydration작업이 일어난다. 이는 페이지 단위로 이뤄지기에 TTI 속도가 느리다.

RSC는 컴포넌트 단위로 서버에서 데이터를 fetching하고, HTML을 렌더링하여 청크 단위로 스트림 방식으로 만들어지는 대로 브라우저에 보내주는 방식이다. 이는 컴포넌트 단위로 데이터 fetching을 할 수 있고, 스트림 방식으로 브라우저에 보내주기에 TTI속도가 빠르다는 장점이 있다. 또한, 클라이언트 사이드 번들링 사이즈를 줄여, 성능 개선에 도움을 준다.

Reference

React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그