리액트가 온라인에서 뜨거운 논쟁을 불러일으키고 있을 무렵, 페이스북 내부에서는 조용하지만 거대한 변화가 일어나고 있었다. 바로 페이스북이 인수한 또 다른 거대 서비스, 인스타그램(Instagram) 팀이 자신들의 웹사이트를 전면 재구축하는 프로젝트에 착수하면서 리액트를 기술 스택으로 채택하기로 결정한 것이다.
이것은 리액트에게 단순한 내부 성공 사례 하나가 추가되는 것 이상의 의미를 가졌다.
인스타그램은 페이스북과는 완전히 다른 제품이었다. 사진과 비디오 중심의 무한 스크롤 인터페이스, 실시간으로 올라오는 ‘좋아요’와 댓글, 그리고 모바일 경험에 극도로 최적화된 빠른 성능이 핵심이었다.
만약 리액트가 인스타그램의 까다로운 요구사항을 만족시킬 수 있다면, 그것은 리액트가 단순히 ‘페이스북 전용 기술’이 아니라, 어떤 종류의 대규모 웹 애플리케이션에도 적용될 수 있는 범용적인 해결책임을 증명하는 가장 확실한 증거가 될 터였다.
인스타그램의 엔지니어링 팀은 처음에는 리액트에 대해 반신반의했다. 그들 역시 JSX의 낯선 문법과 버추얼 DOM의 생소한 개념에 대해 우려를 표했다. 하지만 그들은 페이스북 채팅창과 다른 내부 도구들에서 리액트가 보여준 안정성과 개발 생산성에 주목했다.
특히 그들의 마음을 사로잡은 것은 리액트의 서버 사이드 렌더링(Server-Side Rendering) 가능성이었다.
“우리의 웹사이트는 초기 로딩 속도가 매우 중요합니다.” 인스타그램의 리드 엔지니어가 리액트 팀과의 회의에서 말했다. “사용자가 인스타그램 URL에 접속했을 때, 빈 화면을 보고 자바스크립트가 로드되기를 기다리게 할 순 없습니다. 검색 엔진 최적화(SEO)를 위해서도, 서버에서 완전한 HTML을 즉시 내려주는 것이 필수적입니다.”
이것은 당시 많은 자바스크립트 프레임워크들의 아킬레스건이었다. 앵귤러나 백본 같은 클라이언트 사이드 프레임워크들은 기본적으로 빈 HTML 페이지를 먼저 보낸 뒤, 자바스크립트가 모든 것을 동적으로 그리는 방식이었다. 이는 초기 로딩이 느리고 SEO에 불리하다는 치명적인 단점을 안고 있었다.
하지만 리액트는 태생부터 달랐다.
조던 워크는 XHP의 경험을 바탕으로, 리액트가 서버와 클라이언트 양쪽에서 모두 동작할 수 있도록 설계했다.
“리액트의 버추얼 DOM은 브라우저의 실제 DOM에 대한 의존성이 없습니다. 순수한 자바스크립트 객체일 뿐이죠.” 조던이 설명했다. “따라서 우리는 Node.js 같은 서버 환경에서도 똑같이 리액트 컴포넌트를 렌더링할 수 있습니다. renderToString이라는 함수를 사용하면, 버추얼 DOM을 실제 HTML 문자열로 변환할 수 있죠.”
이것은 인스타그램 팀에게 결정적인 한 방이었다.
그들의 계획은 명확해졌다.
- 사용자가 페이지를 요청하면, 서버(Node.js)에서 리액트 컴포넌트를 렌더링하여 완전한 HTML을 생성, 즉시 사용자에게 보낸다. 사용자는 매우 빠르게 첫 화면을 볼 수 있다.
- 브라우저가 HTML을 받은 뒤, 백그라운드에서 리액트 자바스크립트 파일을 로드한다.
- 자바스크립트 로드가 완료되면, 리액트는 서버에서 렌더링한 HTML 구조와 클라이언트에서 렌더링할 버추얼 DOM 구조를 비교한다.
- 두 구조가 일치하는 것을 확인한 리액트는, 불필요한 DOM 조작 없이 기존 HTML 위에 이벤트 핸들러만 조용히 ‘부착(attach)’한다. 이 과정을 통해 페이지는 정적인 HTML에서 동적인 리액트 애플리케이션으로 부드럽게 전환된다.
이 서버 사이드 렌더링 아키텍처는 초기 로딩 성능과 SEO, 그리고 풍부한 사용자 인터랙션이라는 두 마리 토끼를 모두 잡을 수 있는 완벽한 해결책이었다.
인스타그램의 선택은 페이스북 내외부에 큰 파장을 일으켰다.
‘그 인스타그램이 자신들의 핵심 서비스를 맡길 정도로 리액트를 신뢰한다고?’
이 소식은 온라인 커뮤니티의 비판론자들에게는 당혹감을, 그리고 소수의 지지자들에게는 엄청난 확신을 안겨주었다. 리액트는 이제 단순한 라이브러리가 아니라, 세계 최대 규모의 서비스를 지탱하는 검증된 기술이라는 강력한 타이틀을 얻게 된 것이다.
논쟁의 무게추가 서서히, 하지만 분명하게 리액트 쪽으로 기울기 시작하고 있었다.
