Suspense 경계와 스트리밍 우선순위

Suspense 경계는 스트리밍 세분성을 결정하는 기본 단위입니다. 컴포넌트 트리의 각 Suspense 경계는 독립적으로 스트리밍할 수 있는 섹션을 만듭니다. 리액트는 다른 경계와 관계없이 각 경계를 자체 속도로 해결하고 스트리밍할 수 있습니다.

셸은 Suspense 경계 바깥의 모든 요소로 구성됩니다. 여기에는 레이아웃, 탐색 메뉴, 푸터와 동기적으로 사용할 수 있는 콘텐츠가 포함됩니다. 셸은 가장 먼저 빠르게 스트리밍되므로, 데이터에 의존하는 섹션이 백그라운드에서 로드되는 동안 사용자에게 페이지 구조를 즉시 보여 줍니다.

리액트가 셸을 스트리밍할 때 데이터가 아직 준비되지 않은 Suspense 경계는 대체 UI로 렌더링됩니다. 일반적으로 로딩 스켈레톤이나 스피너가 사용됩니다. 이 대체 UI는 초기 HTML 응답에 포함되므로 사용자는 빈 공간 대신 즉시 로딩 표시기를 보게 됩니다.

Suspense 경계의 데이터가 해결되면 리액트는 해결된 HTML과 작은 인라인 스크립트를 함께 스트리밍합니다. 이 스크립트는 새로 스트리밍된 콘텐츠를 숨겨진 템플릿 요소에서 DOM의 올바른 위치로 옮겨 전체 페이지를 다시 로드하지 않고 대체 UI를 교체합니다.

리액트는 HTML template 요소 패턴을 사용합니다. 해결된 Suspense 콘텐츠를 숨겨진 template으로 스트리밍한 다음, 스크립트가 리액트 내부 함수를 호출해 template 콘텐츠를 올바른 DOM 위치로 교체합니다. 이를 통해 JS 프레임워크 없이도 DOM을 조작하여 콘텐츠를 교체할 수 있습니다.

중첩된 Suspense 경계는 서로 독립적인 해결 타임라인을 가집니다. 내부 Suspense 경계가 바깥쪽 경계보다 먼저 해결될 수 있으며, 바깥쪽 경계가 해결되었는지와 관계없이 리액트는 내부 콘텐츠가 준비되는 즉시 스트리밍합니다. 이를 통해 데이터 로딩의 병렬성이 극대화됩니다.

효과적인 Suspense 배치는 느리고 데이터에 의존하는 컴포넌트를 Suspense 경계 안에 두고, 빠르거나 정적이거나 동기적으로 사용할 수 있는 콘텐츠를 바깥에 두는 방식입니다. 탐색 메뉴, 정적 텍스트가 있는 주요 영역, 푸터는 바깥에 둡니다. 상품 목록, 사용자 대시보드, 댓글 피드는 안에 둡니다.

리액트는 Suspense 경계가 해결되는 순서대로 스트리밍하므로 문서에 나타나는 순서와 반드시 같지는 않습니다. 화면 아래쪽의 섹션이 필요한 데이터가 더 적다면 화면 위쪽의 섹션보다 먼저 해결될 수도 있습니다. 스트리밍 순서와 관계없이 리액트가 DOM 삽입을 올바르게 처리합니다.

리액트 18의 선택적 하이드레이션은 사용자 상호작용에 반응합니다. 아직 하이드레이션되지 않은 Suspense 경계를 사용자가 클릭하거나 가리키면 리액트는 해당 경계를 먼저 하이드레이션하도록 우선순위를 높입니다. 따라서 페이지의 다른 부분이 여전히 하이드레이션 중이어도 사용자 상호작용이 빠르게 반응합니다.

Suspense 경계가 많을수록 스트리밍의 유연성은 커지지만, 너무 많으면 인라인 교체 스크립트로 인한 오버헤드가 증가합니다. 실용적인 지침은 개별 컴포넌트가 아니라 전체 "섹션"(화면 위쪽 콘텐츠, 사이드바, 화면 아래쪽 피드)을 감싸는 것입니다. 페이지당 Suspense 경계를 1~3개 사용하는 것이 일반적으로 적절합니다.

Chrome DevTools의 Network 탭에서 "Preserve log"를 사용해 응답이 스트리밍되는 모습을 관찰하세요. HTML 문서가 여러 덩어리로 커지는 것을 확인할 수 있습니다. Performance 탭에는 FCP와 LCP 표시가 나타납니다. 스트리밍 빌드와 비스트리밍 빌드를 비교해 개선 정도를 수치로 확인하세요. 효과를 더 뚜렷하게 보려면 Fast 3G로 속도를 제한하세요.

초기 스트리밍 HTML 응답에서 Suspense 경계의 대체 UI는 어떻게 될까요?

Suspense 경계는 리액트 트리를 독립적으로 스트리밍할 수 있는 섹션으로 나눕니다. 셸(Suspense 바깥 부분)이 먼저 스트리밍되고, 아직 처리 중인 경계에는 대체 UI가 즉시 표시되며, 해결된 콘텐츠가 인라인 스크립트를 통해 대체 UI를 교체합니다. 중첩된 경계는 독립적인 타임라인을 가집니다. 최적의 스트리밍 세분성을 위해 경계를 섹션 수준에 배치하고, 상호작용에 따른 하이드레이션 순서는 리액트의 우선순위 시스템에 맡기세요.