Antigravity Agent
4.2 KiB
4.2 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Suspense 및 Streaming | Suspense 및 Streaming은 현대 React 프레임워크(특히 React Server Components 및 Next. | 2026-05-04 |
Suspense 및 Streaming
📌 Brief Summary
Suspense 및 Streaming은 현대 React 프레임워크(특히 React Server Components 및 Next.js 환경)에서 비동기 데이터 로딩과 렌더링 성능을 최적화하기 위한 핵심 패턴이다 [1-3]. 서버는 모든 데이터가 준비될 때까지 기다리지 않고 먼저 준비된 HTML 셸을 즉시 전송하며, 이후 데이터를 청크 단위로 스트리밍한다 [4, 5]. 이 과정에서 Suspense는 데이터 로딩이 완료될 때까지 임시 Fallback UI(예: 로딩 메시지)를 보여주어, 실행 시간이 긴 쿼리가 전체 페이지 렌더링을 차단하는 것을 방지한다 [3, 6, 7].
📖 Core Content
- 아웃오브오더(Out-of-order) 스트리밍: 스트리밍 아키텍처를 도입하면 가장 느린 데이터베이스 쿼리를 기다리며 빈 화면을 보여주는 대신, 서버가 렌더링 셸을 즉시 클라이언트로 전송한다 [4]. 이후 로딩이 지연되는 데이터는 서버에서 준비가 완료되는 시점에 브라우저로 푸시(push)된다 [1]. 클라이언트는 나머지 데이터가 여전히 전송되는 중이더라도, 먼저 도착한 부분부터 점진적으로 하이드레이션(Hydration)을 시작할 수 있다 [4].
- Suspense 경계(Boundary)의 역할: Suspense는 스트리밍이 동작하는 기준점이 된다 [6]. Suspense 경계 상단에 위치한 UI는 즉시 렌더링되며, 경계 내부에 있는 서버 컴포넌트들의 데이터 페칭이 끝날 때까지는 지정된 대체 UI(Loading state)를 표시한다 [3, 6, 8].
- 병렬 데이터 페칭 지원:
React는
await된 비동기 요청들을 파악하여, 형제(Sibling) 노드에 있는 여러 컴포넌트들이 데이터를 병렬로 불러올 수 있도록 처리한다 [6]. - React Native와 React 18 동시성(Concurrent) 기능의 호환성: React Native의 새로운 렌더링 시스템인 Fabric 아키텍처 역시 React 18의 동시성 기능과 호환되어, 데이터 페칭을 위한 Suspense와 Transitions 등의 기능을 네이티브 환경에서도 지원한다 [9].
- React Query 등 클라이언트 상태 관리와의 결합:
클라이언트 컴포넌트 내부에서
useSuspenseQuery와 같은 훅을 사용하여 데이터를 불러올 수 있으며, URL 변경 시startTransition과 함께 사용하여 기존 화면을 유지한 채 데이터를 업데이트하는 패턴도 적용 가능하다 [10].
⚖️ Trade-offs & Caveats
- 부모-자식 간의 워터폴(Waterfall) 문제: 데이터 페칭 시 형제 컴포넌트 간에는 병렬 처리가 가능하지만, 부모와 자식 컴포넌트가 모두 데이터를 불러와야 하는 구조에서는 부모의 로딩이 완료되기 전까지 자식 컴포넌트가 렌더링을 시작할 수 없는 구조적 병목이 발생한다 [6, 11]. 이를 해결하려면 컴포넌트 트리 상단에서 데이터를 미리 불러온 뒤 하위로 전달해야 하는 제약이 따른다 [11].
- 라우팅과의 불완전한 통합으로 인한 UX 저하 가능성:
Next.js 환경에서 React Query를 사용할 때,
window.history.pushState를 활용하여 클라이언트 측 URL만 변경하려 할 경우 해당 기능이 Transition과 제대로 통합되지 않는 버그가 존재한다 [12]. 이 때문에useSuspenseQuery가 실행될 때 화면의 현재 콘텐츠가 갑자기 일시 중단되고 가장 가까운 Suspense의 Fallback(로딩 화면) UI가 노출되는 매우 불편한 사용자 경험을 유발할 수 있다 [12]. - 설계 및 유지보수 복잡성 증가: 클라이언트 컴포넌트와 서버 컴포넌트가 다중으로 중첩(interleaving)되거나 다양한 Context가 얽힌 환경에 Suspense를 도입할 경우, 프레임워크의 전반적인 아키텍처 복잡성이 대폭 증가하며 개발 경험(Ergonomics)을 해칠 수 있다는 단점이 있다 [13].
Last updated: 2026-05-03