웹 프론트엔드는 지난 몇 년간 급격한 변화를 겪으며, 사용자 경험을 향상시키기 위한 다양한 접근법이 시도되고 있다.
그 마지막에 등장한 RSC (React Server Component)는 현 시점에서 가장 최신의 랜더링 방식이다.
RSC는 어떤 점을 개선하고, 이전과 비교하여 어느정도의 차이가 있는지 살펴보자.
기존의 랜더링 방식
이 글에서 말하는 기존의 랜더링 방식은 CSR (Client Side Rendering)을 말하는 것이다.
CSR은 일반적으로 아래와 같은 방식이다.
CSR에서는 초기 HTML이 거의 비어 있으며, 브라우저가 자바스크립트를 로드하고 실행하여 필요한 데이터를 가져오고 DOM을 동적으로 구성된다.
그렇기에 초기 로딩 시간이 길어질 수 있으며, 특히 느린 네트워크 환경에서는 사용자 경험이 저하될 수 있다.
RSC
그렇다면 RSC는 어떨까?
기존 CSR대비 약간 단순해 졌으며 여러 이점이 있지만,
핵심은 브라우저 밖으로 나가는 요청이 2번에서 1번으로 줄었다는 점이다.
모든 콘텐츠를 표시하기 위해 필요했던 2번의 네트워크 왕복을 1번으로 줄일 수 있다.
위에서 볼 수 있듯이 초기 HTML을 받아오는 것을 볼 수 있다.
그리고, 후에 완성된 컴포넌트(rsc_payload)를 스트리밍 방식으로 받아오게 된다.
성능 차이
- 폰트는 제거하고 측정함
- lighthouse의 모바일 사용
CSR
RSC
콘텐츠가 처음 그려지기까지 시간을 측정하는 지표인 FCP(First Contentful Paint)는 동일하지만,
마지막에 그려지는 콘텐츠까지 시간을 측정하는는 지표인 LCP(Largest Contentful Paint)는 1.6초 차이로 유의미한 차이가 있는것을 볼 수 있다.