React Server Components(RSC) 아키텍처와 하이드레이션(Hydration) 페이로드의 소거

저희 회사의 대형 커머스 페이지 초기 로딩 속도(LCP)를 프로파일링 하던 중 뼈아픈 역설과 마주했습니다. SPA 반응성을 최고조로 올리겠다며 짜 놓은 막대한 양의 React 클라이언트 자바스크립트 코드 번들이, 역설적이게도 유저의 브라우저 쓰레드를 1초 내내 멈춰 세워 초기 렌더링 화면을 백지(White Screen)로 만들고 있었던 것입니다. 이 문제를 해결한답시고 적용했던 서버 사이드 렌더링(SSR) 역시 절반의 정답에 불과했습니다. 서버가 던져준 텅 빈 텍스트 껍데기 HTML이 화면에 빨리 뜨기는 했으나, 그 껍데기에 생명력을 불어넣기 위해 다운로드해 뒤늦게 연결하는 수 메가바이트짜리 JS 번들의 합체 과정(Hydration) 동안, 페이지는 버벅거리고 버튼을 눌러도 반응하지 않는 기괴한 '언캐니 밸리(Uncanny Valley)' 상태 속에서 헤맸습니다. 이 유저와 스크립트 간의 질긴 악연을 절단해 준 게임 체인저가 바로 React Server Components(RSC) 모델의 도입이었습니다. 이 아키텍처에서 모든 무거운 데이터 패칭과 데이터 조작 로직, 심지어 거대한 오픈소스 마크다운 파싱 라이브러리들까지 모조리 '서버 컴포넌트'로 선언해 버렸습니다. 이들은 빌드 타임 혹은 서버 런타임에 자신들의 할 일을 마치고 오직 '완성된 순수 HTML 가상 DOM 조각'만을 클라이언트로 전송한 뒤, 자신의 몸값 높은 무거운 JavaScript 패키지는 브라우저로 단 한 1Byte도 내려보내지 않고 조용히 증발해 버립니다. 오직 '버튼 클릭'이나 '캐러셀 훅'이 필요한 최소한의 잎사귀(Client Component)만이 클라이언트로 배달되었습니다. 하이드레이션 페이로드는 80%가 감소하였고 유저들은 페이지 로드 직시 뚝뚝 끊김 없는 네이티브 앱 수준의 쾌면을 경험하게 되었습니다. 오랫동안 프론트엔드를 고통받게 했던 도구병의 시대를 지나, 다시 서버의 권위와 강력한 원시 HTML 컴퓨팅으로의 회귀가 프론트엔드의 궁극적 터닝포인트임을 직감한 강력한 아키텍처 개편이었습니다.