훅은 클라이언트 사이드 렌더링의 세계에 질서를 가져왔다. 개발자들은 이제 브라우저 안에서 일어나는 복잡한 상태 변화와 부수 효과를 우아하게 다룰 수 있는 강력한 도구를 손에 쥐었다.
하지만 웹 애플리케이션의 세계는 브라우저만으로 이루어져 있지 않았다.
데이터가 시작되는 곳, ‘서버’라는 거대한 대륙이 항상 존재했다.
어느 날 오후, 리액트 팀의 회의실.
동시성 모드의 안정화 작업이 순조롭게 진행되면서, 팀의 시선은 자연스럽게 다음 목표를 향하고 있었다.
세바스티안이 화이트보드에 현재 웹 애플리케이션의 일반적인 데이터 흐름을 그렸다.
- 브라우저가 서버에 빈 HTML 페이지를 요청한다.
- 서버가 응답하면, 브라우저는 거대한 자바스크립트 번들 파일을 다운로드한다.
- 자바스크립트 실행이 끝나면, 리액트가 렌더링을 시작한다.
- 컴포넌트(예:
UserProfile)가 마운트되고,useEffect안에서 서버에 데이터를 요청하는fetch가 시작된다. - 서버가 데이터(JSON)를 응답한다.
- 데이터를 받은 리액트가 다시 렌더링하여, 마침내 완전한 UI를 화면에 그린다.
“이 과정에서, 우리는 서버와 최소 두 번 이상 통신해야 합니다.”
세바스티안이 지적했다. “페이지를 위한 통신 한 번, 데이터를 위한 통신 한 번. 이 네트워크 왕복(roundtrip)은, 특히 느린 네트워크 환경의 사용자에게는 치명적인 초기 로딩 속도 저하를 유발합니다.”
그의 말은 모두가 알고 있는 사실이었다. 이것이 클라이언트 사이드 렌더링이 가진 태생적인 한계였다.
“만약… 만약 이 과정을 단축시킬 수 있다면 어떨까요?”
그의 목소리가 조용히 회의실에 울려 퍼졌다.
“컴포넌트가 브라우저가 아닌, 서버에서 직접 실행될 수 있다면요? 서버에서 데이터를 즉시 가져와 HTML을 완성한 뒤, 브라우저에 전달하는 겁니다. 그러면 네트워크 왕복은 단 한 번으로 줄어들겠죠.”
물론, 서버 사이드 렌더링(SSR)이라는 기술이 이미 존재했다. 하지만 기존 SSR은 초기 화면을 빠르게 보여줄 뿐, 결국 전체 자바스크립트 번들을 다운로드하고 실행해야만 인터랙티브해지는 한계가 있었다.
세바스티안이 그리는 그림은 그것보다 훨씬 더 근본적인 것이었다.
“제가 말하는 것은, 컴포넌트 아키텍처 자체를 서버와 클라이언트로 나누는 것입니다. 어떤 컴포넌트는 오직 서버에서만 렌더링되고, 또 어떤 컴포넌트는 클라이언트에서 인터랙션을 담당하도록 말이죠.”
그의 눈앞에는 새로운 질문이 떠오르고 있었다.
‘클라이언트와 서버의 경계를 어떻게 허물 수 있을까?’
훅이 클라이언트 내부의 복잡성을 해결했듯, 이제 그들은 애플리케이션 전체 아키텍처의 복잡성에 도전할 준비를 하고 있었다.
이것은 훅의 시대를 열었던 것만큼이나, 혹은 그보다 더 거대한 패러다임의 전환을 예고하는 것이었다.
아직은 안갯속에 가려진, 희미한 아이디어의 씨앗일 뿐이었다.
그 씨앗이 싹을 틔우고 거대한 나무로 자라나기까지는, 또다시 수년의 연구와 수많은 실패, 그리고 격렬한 논쟁이 필요할 터였다.
훅의 이야기는 정점에 도달했지만, 리액트의 이야기는 끝나지 않았다.
오히려 훅이라는 단단한 발판 위에서, 그들은 더 높고 어려운 정상을 향한 새로운 등반을 막 시작하려 하고 있었다. 그들의 도전 정신은 결코 멈추지 않았다.
