선택적 하이드레이션을 활용한 점진적 하이드레이션

선택적 하이드레이션은 전체 페이지의 JavaScript 다운로드를 기다리지 않고, JavaScript 코드가 도착하는 즉시 리액트가 컴포넌트 하이드레이션을 시작할 수 있게 하는 React 18의 기능입니다. 코드가 독립적으로 분할된 각 섹션은 모든 섹션이 한꺼번에 하이드레이션되는 대신 해당 번들이 로드될 때 하이드레이션됩니다.

React 18 이전에는 하이드레이션이 "전부 아니면 전무"였습니다. 리액트는 페이지의 어떤 부분이든 상호작용 가능해지기 전에 모든 JavaScript를 다운로드하고 전체 트리를 하이드레이션해야 했습니다. React 18은 이 제약을 없앴습니다. 이제 트리의 각 부분은 해당 코드와 데이터가 준비되는 대로 독립적으로 하이드레이션됩니다.

아직 하이드레이션되지 않은 Suspense 경계를 사용자가 클릭하거나 상호작용하면 리액트는 다른 대기 중인 하이드레이션 작업보다 해당 하위 트리의 하이드레이션을 즉시 우선 처리합니다. 따라서 사용자가 사용하려는 대상이 문서 순서상 앞에 있지 않더라도 가장 먼저 상호작용 가능해집니다.

React.lazy를 동적 가져오기 및 Suspense 경계와 결합하면 코드가 분할된 컴포넌트에 선택적 하이드레이션을 적용할 수 있습니다. 브라우저는 먼저 기본 JS 번들을 다운로드하고 셸을 즉시 하이드레이션합니다. 각 지연 로드 컴포넌트는 해당 청크가 다운로드될 때 브라우저가 순차적으로 가져오는 과정에 맞춰 하이드레이션됩니다.

그 결과 화면 위쪽 콘텐츠가 화면 아래쪽 JavaScript가 다운로드되기도 전에 상호작용 가능해집니다. 댓글 피드와 추천 위젯이 여전히 JavaScript 청크를 로드하는 동안에도 사용자는 탐색 메뉴와 주요 영역의 CTA를 사용할 수 있습니다.

선택적 하이드레이션은 하이드레이션 성능의 핵심 지표인 총 차단 시간(TBT)을 줄입니다. Chrome DevTools의 Performance 탭에서는 긴 작업(50ms를 초과하는 작업)이 빨간색으로 강조 표시됩니다. 선택적 하이드레이션 전에는 전체 하이드레이션을 위한 300ms짜리 긴 작업 하나가 나타날 수 있지만, 적용 후에는 여러 개의 작은 작업이 시간에 걸쳐 분산되어 나타납니다.

선택적 하이드레이션을 약화시키는 안티패턴은 앱의 최상위에서 모든 컴포넌트를 가져오는 것입니다. 예를 들면 import Footer from './Footer'와 같습니다. 이렇게 하면 하이드레이션이 시작되기도 전에 브라우저가 Footer의 코드를 다운로드하고 구문 분석한 뒤 실행해야 합니다. 화면 아래쪽 컴포넌트의 최상위 가져오기를 React.lazy와 동적 가져오기로 바꾸세요.

초기 뷰포트 아래에 나타나는 컴포넌트에는 const Footer = React.lazy(() => import('./Footer'))를 사용하세요. 간단한 대체 UI와 함께 Suspense로 감싸면 됩니다. 브라우저는 화면 위쪽 하이드레이션이 완료될 때까지 Footer 번들 가져오기의 우선순위를 낮추므로 TBT가 자연스럽게 개선됩니다.

스트리밍과 선택적 하이드레이션은 서로 보완적입니다. 스트리밍은 HTML 청크를 보내 FCP와 LCP를 개선하고, 선택적 하이드레이션은 JavaScript 청크를 처리해 TTI와 TBT를 개선합니다. 두 기술을 함께 사용하면 "콘텐츠를 빠르게 표시하기"와 "빠르게 상호작용 가능하게 만들기"라는 성능의 두 측면을 모두 해결할 수 있습니다.

리액트 서버 컴포넌트는 선택적 하이드레이션을 한 단계 더 발전시킵니다. 서버 컴포넌트는 클라이언트에 보낼 JavaScript를 전혀 생성하지 않습니다. "use client"로 표시된 클라이언트 컴포넌트만 하이드레이션하면 됩니다. 따라서 하이드레이션해야 하는 JavaScript의 전체 양이 줄어 선택적 하이드레이션의 효과가 더욱 커집니다.

실용적인 패턴은 다음과 같습니다. renderToPipeableStream으로 HTML을 스트리밍하고, 페이지를 루트 hydrateRoot 호출로 감싸 하이드레이션 모드를 활성화합니다(createRoot 대신 사용). 화면 아래쪽의 모든 섹션에는 React.lazy를 사용하고 각 섹션을 Suspense 경계로 감싸세요. 나머지는 리액트가 자동으로 처리합니다.

React 18에서 사용자 상호작용은 선택적 하이드레이션의 우선순위에 어떤 영향을 주나요?

선택적 하이드레이션을 사용하면 전체 번들을 기다리는 대신 JavaScript가 도착하는 대로 리액트가 컴포넌트 하위 트리를 점진적으로 하이드레이션합니다. 사용자 상호작용은 대상 하위 트리의 하이드레이션을 우선 처리합니다. 화면 아래쪽 콘텐츠에 React.lazy와 동적 가져오기를 사용하고 Suspense 경계와 결합하면 이러한 점진적 패턴을 구현할 수 있습니다. 선택적 하이드레이션과 스트리밍 SSR은 서로 보완적인 기술로, 함께 사용하면 콘텐츠 전달 성능과 상호작용 성능을 모두 개선할 수 있습니다.