전체 하이드레이션 문제

하이드레이션은 리액트가 서버에서 렌더링된 HTML을 가져와 JavaScript 이벤트 처리기를 연결하는 과정입니다. 서버가 초기 HTML을 빠르게 보내면 브라우저가 JavaScript 묶음을 다운로드하고, 리액트가 정적인 HTML을 하이드레이션하여 상호작용할 수 있게 만듭니다. 하이드레이션이 완료될 때까지 페이지는 상호작용할 수 있어 보이지만 실제로는 그렇지 않습니다.

기존 단일 페이지 애플리케이션은 전체 JavaScript 묶음을 브라우저로 보냅니다. 리액트는 이를 다운로드하고 구문 분석하고 실행한 다음 트리의 모든 구성 요소에 이벤트 처리기를 연결해야 합니다. 규모가 큰 애플리케이션에서는 중급형 모바일 기기에서 이 과정에 몇 초가 걸릴 수 있습니다.

상호작용 가능 시간은 사용자가 페이지와 상호작용할 수 있을 때까지 걸리는 시간을 측정합니다. 하이드레이션은 TTI를 직접 지연시킵니다. 페이지가 준비된 것처럼 보여도 서버에서 렌더링된 HTML이 표시될 뿐이며, 리액트가 이벤트 처리기 연결을 완료할 때까지 버튼과 양식은 반응하지 않습니다. TTI 수치가 높으면 사용자 경험이 좋지 않습니다.

마케팅 페이지를 생각해 보겠습니다. 콘텐츠의 80%는 절대 변경되지 않는 정적 텍스트, 이미지, 제목입니다. 뉴스레터 양식이나 동영상 재생기 같은 상호작용 요소가 차지하는 부분은 20%뿐입니다. 하지만 기존 SPA 하이드레이션은 페이지의 100%에 대해 실행되므로 정적인 구성 요소까지 불필요하게 처리합니다.

크롬 DevTools의 성능 프로파일링을 사용하면 하이드레이션 비용을 확인할 수 있습니다. 주 스레드 폭포형 차트에서 초기 화면 표시 직후 긴 JavaScript 실행 블록으로 나타나는 "리액트 하이드레이션" 작업을 찾을 수 있습니다. 이 블록이 길수록 주 스레드가 더 오래 점유되고 페이지의 응답성은 떨어집니다.

리액트 구성 요소 트리가 클수록 하이드레이션에 더 많은 작업이 필요합니다. 리액트는 모든 구성 요소를 방문하고, 서버에서 렌더링된 HTML과 해당 구성 요소가 렌더링할 내용을 비교하며, 이벤트 처리기를 연결해야 합니다. 수백 개의 구성 요소로 이루어진 복잡한 페이지에서는 빠른 기기를 사용하더라도 하이드레이션 오버헤드가 측정될 수 있습니다.

리액트 18에는 동시 하이드레이션이 도입되었습니다. 이를 통해 리액트는 하이드레이션을 더 작은 단위로 나누고 각 단위 사이에 브라우저에 제어권을 넘길 수 있습니다. 따라서 큰 트리를 하이드레이션하는 동안 브라우저가 완전히 멈춘 것처럼 보이는 현상을 방지할 수 있습니다. 그러나 동시 하이드레이션은 영향을 줄일 뿐 근본적인 비용을 없애지는 못합니다.

선택적 하이드레이션은 Suspense를 통해 리액트가 우선순위에 따라 구성 요소를 하이드레이션하도록 합니다. 사용자의 상호작용이 발생하면 관련 구성 요소가 즉시 하이드레이션됩니다. 이를 통해 응답성이 향상되지만 여전히 하나의 리액트 트리 안에서 작동하므로 트리의 모든 구성 요소는 결국 하이드레이션됩니다.

아일랜드 아키텍처를 이끄는 근본적인 통찰은 일반적인 페이지 대부분에 JavaScript가 전혀 필요하지 않다는 것입니다. 탐색 모음, 주요 소개 영역, 바닥글 링크, 블로그 게시물 텍스트, 제품 설명은 순전히 표현을 위한 요소입니다. 이러한 요소까지 하이드레이션을 강제하는 것은 정의상 낭비입니다.

웹 성능 팀의 연구에 따르면 JavaScript의 구문 분석 및 실행 시간은 모바일 기기에서 가장 큰 비용입니다. 300킬로바이트의 JavaScript 묶음은 일반적인 안드로이드 휴대전화에서 구문 분석하는 데 2~3초가 걸립니다. 브라우저로 보내는 JavaScript를 줄이는 것은 리액트 내부의 어떤 최적화보다도 훨씬 큰 성능 향상을 가져옵니다.

리액트 애플리케이션에 JavaScript를 1킬로바이트 추가할 때마다 하이드레이션 작업도 늘어납니다. 구성 요소가 순전히 장식용이더라도 리액트 트리에 포함되어 있으면 하이드레이션에 참여합니다. 이 "하이드레이션 비용"은 애플리케이션 크기에 따라 증가하므로 애플리케이션이 커질수록 양호한 TTI 수치를 유지하기가 점점 어려워집니다.

리액트 하이드레이션과 상호작용 가능 시간(TTI)은 어떤 관계가 있습니까?

기존 리액트 하이드레이션은 JavaScript가 필요 없는 정적 콘텐츠까지 포함해 전체 구성 요소 트리를 처리합니다. 이로 인해 상호작용 가능 시간이 지연되고 애플리케이션 크기가 커질수록 효율적으로 확장되지 않습니다. 리액트 18의 동시 하이드레이션과 선택적 하이드레이션 개선은 영향을 줄이지만 근본적인 비용을 없애지는 못합니다. 핵심 통찰은 페이지 콘텐츠 대부분에 JavaScript가 필요하지 않으므로 전체 하이드레이션이 낭비라는 것입니다.