- 점진적 JPEG처럼, JSON 데이터도 불완전한 상태로 먼저 전송하여 클라이언트가 점차 내용 전체를 활용할 수 있는 방식 소개
- 기존 JSON 파싱 방식은 전체 데이터가 완전히 수신되기 전까지 아무런 작업이 불가능한 비효율성 문제 있음
- Breadth-first 방식으로 데이터를 여러 청크(부분)로 구분하여, 아직 준비되지 않은 부분은 Promise로 표시하고 준비되는 대로 점진적으로 채워, 클라이언트가 미완성 데이터도 활용 가능함
- 이 개념은 React Server Components(RSC) 의 핵심 혁신이며,
<Suspense>를 통해 의도된 단계별 로딩 상태를 제어함 - 데이터 스트리밍과 의도적 UI 로딩 흐름을 분리하여 더욱 유연한 사용자 경험 제공 가능
점진적(Progressive) JPEG과 점진적 JSON의 아이디어
- 점진적 JPEG는 이미지를 위에서 아래로 한 번에 불러오는 대신, 흐릿한 상태로 전체를 먼저 보여주고 점차 선명해지는 방식임
- 이와 유사하게, JSON 전송에도 점진적 방식을 적용함으로써 전체가 완성될 때까지 기다리지 않고 일부 데이터를 즉시 사용할 수 있음
- 예시 JSON 데이터 구조에서, 일반적 방식은 마지막 바이트까지 모두 받아야지만 파싱이 가능함
- 이로 인해 클라이언트는 서버의 느린 부분(예: 느린 DB에서 comments 불러옴)까지 모두 전송될 때까지 대기해야 하며, 이는 매우 비효율적인 현재의 표준임
스트리밍 JSON 파서의 한계
- 스트리밍 JSON 파서를 도입하면 불완전한(중간) 데이터 객체 트리를 생성 가능
- 하지만, 각 객체의 필드(예: footer, 여러 개의 comment 목록 등)가 일부만 전달되는 경우 타입이 불일치하고, 완성 여부 파악이 어려워 활용도 저하 문제 발생
- HTML의 스트리밍 렌더링과 유사하게, 순서대로 스트림 처리 시 하나의 느린 부분이 전체 결과를 지연시키는 문제가 동일하게 발생함
- 일반적으로 스트리밍 JSON의 활용이 드문 이유임
Progressive JSON 구조 제안
- 기존 방식의 깊이 우선 스트리밍(즉, 트리구조 하위까지 내부 순회 전송하는 방식)이 아닌, Breadth-first(너비 우선) 방식 도입
- 최상위 객체만 먼저 전송하고, 하위 값들은 Promise와 같은 플레이스홀더로 두고 준비되는 대로 한 번에 각각의 청크로 채워나감
- 예를 들어 서버가 비동기로 데이터 로딩이 끝날 때마다 대응하는 청크를 전송, 클라이언트는 준비된 만큼만 활용 가능
- 비동기적 데이터 수신(이른 로드) 이 가능해지고, 여러 느린 부분이 모두 처리가 끝날 때까지 전체 대기하지 않아도 됨
- 클라이언트를 청크별 비순차 및 부분 순차 수신에 강하게 구성하면, 서버는 다양한 청크 분할 전략을 유연하게 적용 가능
Inlining과 Outlining: 효율적 데이터 전송
- 점진적 JSON 스트리밍 포맷은 재사용 객체(예: 동일 userInfo를 여러 군데에서 참조)도 중복 저장 없이 한 개의 청크로 따로 추출하여 각 위치에서 동일 참조 가능
- 느린 부분만 분리해 placeholder로 전송하고, 나머지는 바로 채워 효율적 데이터 스트림 구현
- 동일한 객체가 여러 번 등장하는 경우, 한 번만 전송하고 재활용(Outlining) 가능
- 이러한 방식으로 순환 참조(객체가 자기 자신을 참조하는 구조) 도 일반 JSON처럼 곤란하지 않고 청크 내 간접 참조 구조로 자연스럽게 직렬화 가능
React Server Components(RSC)의 점진적 스트리밍 구현
- 실제 React Server Components는 점진적 JSON 스트리밍 모델을 적용한 대표적 예시임
- 서버가 외부 데이터(예: Post, Comments)를 비동기로 불러오는 구조를 사용
- 클라이언트에선 아직 도착하지 않은 부분을 Promise로 두고, 준비되는 순서대로 점진적 UI 렌더링
- React의
<Suspense>로 의도적인 로딩 상태를 설정- 사용자 경험상 불필요한 화면 점프 방지를 위해, Promise 상태(구멍)를 바로 보여주지 않고,
<Suspense>fallback으로 단계별 로딩 연출 가능 - 데이터가 빠르게 도착해도 실제 UI는 설계된 단계에 맞춰 점진적으로 노출되게 개발자가 제어 가능
- 사용자 경험상 불필요한 화면 점프 방지를 위해, Promise 상태(구멍)를 바로 보여주지 않고,
요약 및 시사점
- React Server Components의 핵심 혁신은 컴포넌트 트리 속성(props)을 외곽부터 점진적으로 스트리밍하는 방식에 있음
- 따라서, 서버가 완전히 모든 데이터를 준비할 때까지 기다릴 필요 없이, 주요 부분부터 점차 보여주며 로딩 대기 상태도 세밀하게 제어 가능
- 스트리밍 자체뿐 아니라, 이를 활용하는 프로그래밍 모델(React의
<Suspense>) 같은 구조적 지원이 함께 필요함 - 이를 통해, 느린 데이터 한 부분이 전체를 지연시키는 문제 등 기존 전송 방식의 병목 현상 완화 가능