React renderToPipeableStream with Express: 서버사이드 스트리밍의 깊은 탐구

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React와 Express를 사용하는 서버사이드 렌더링(SSR) 개발자, 성능 최적화 및 스트리밍 기술 적용에 관심 있는 프론트엔드/백엔드 개발자

핵심 요약

• renderToPipeableStream은 전체 HTML을 생성하지 않고 프로젝트 단위로 스트리밍하여 TTFB(첫 바이트 도달 시간) 향상
• Suspense와 Selective Hydration을 통해 비동기 데이터 로딩 시에도 빠른 UI 피드백 제공
• Express 서버 설정 시 onShellReady 및 onAllReady 콜백을 통해 스트리밍 흐름 제어 및 에러 처리 강화

섹션별 세부 요약

1. 문제 이해

• 전통적 SSR의 한계:
• TTFB 지연, 메모리 사용량 증가, 비동기 작업 차단
• 사용자 경험 향상 없음: 전체 렌더링 완료 전까지 UI 노출 불가

2. `renderToPipeableStream` 소개

• Node.js 스트리밍 API로 HTML을 조각 단위로 클라이언트에 전송
• 비동기 작업 처리 및 선택적 하이드레이션 지원
• Suspense를 통해 데이터 로딩 중에도 로딩 상태 표시 가능

3. Express 서버 설정

• getHTMLTemplate 함수로 HTML 템플릿 생성
• onShellReady 콜백을 통해 렌더링 완료 시 스트리밍 시작
• onShellError 및 onError로 에러 처리 로직 구현

4. 구현 예제

• Suspense와 App 컴포넌트로 데이터 로딩 처리
• UserSkeleton과 같은 스켈레톤 UI로 사용자 경험 개선
• StreamingErrorBoundary로 에러 영역 분리

5. 성능 영향

• TTFB 감소, 메모리 사용량 최적화
• SEO 향상: 검색 엔진이 초기 HTML 조각부터 크롤링 가능

6. 고급 기능

• bootstrapScripts 및 bootstrapScriptContent로 클라이언트 렌더링 초기화
• onAllReady 콜백을 통해 모든 콘텐츠 전송 완료 알림

7. 최적화 팁

• 스켈레톤 컴포넌트 사용: 최종 UI 구조와 일관된 임시 UI 제공
• 에러 경계 설정: 특정 섹션의 실패를 방지
• 타임아웃 처리: 10초 이상의 요청은 abort()로 중단

8. 일반적인 문제 해결

• 헤더 설정 시기: 스트리밍 시작 전에 res.setHeader() 호출
• 타임아웃 정리: res.on('finish') 및 res.on('close') 이벤트로 정리
• 콘텐츠 일관성: 서버와 클라이언트에서 동일한 데이터 소스 사용

결론

• renderToPipeableStream을 사용할 때는 onShellReady와 onAllReady 콜백을 반드시 구현하고, 타임아웃 처리 및 에러 경계 설정이 필수적
• 스켈레톤 UI과 선택적 하이드레이션을 통해 사용자 경험 향상 가능, 성능 지표(TTFB, 메모리 사용량) 개선을 목표로 하세요