React 18의 Stream SSR: renderToPipeableStream으로 SSR 성능 최적화하기

React 18의 Stream SSR: renderToPipeableStream을 활용한 고급 SSR 기법

핵심 기술

React 18에 도입된 renderToPipeableStream API는 서버 측 렌더링(SSR)의 패러다임을 변화시키며, HTML을 청크(chunk) 단위로 점진적으로 클라이언트에 전송하는 스트리밍 SSR을 가능하게 합니다. 이를 통해 기존 SSR의 Time to First Byte(TTFB) 지연, 높은 메모리 사용량, 렌더링 차단 등의 문제를 해결하고 사용자 경험을 크게 향상시킬 수 있습니다.

기술적 세부사항

• 기존 SSR의 문제점: 전통적인 SSR은 전체 컴포넌트 트리를 문자열로 렌더링한 후 클라이언트에 전송했습니다. 이로 인해 TTFB 지연, 서버 메모리 과다 사용, 느린 컴포넌트로 인한 전체 렌더링 차단, 사용자가 아무것도 보지 못하는 경험 등의 문제가 발생했습니다.
• renderToPipeableStream 소개: 이 API는 Node.js의 pipeable 스트림을 반환하여 HTML을 점진적으로 전송할 수 있게 합니다. 이는 비동기 작업을 차단 없이 처리하고, 사용자에게 즉각적인 피드백을 제공하며, 서버 리소스를 효율적으로 사용하게 합니다.
• 주요 기능:
  • 스트리밍: 렌더링되는 대로 HTML을 청크로 전송합니다.
  • Suspense: 데이터 로딩 중 렌더링을 일시 중단하고, 로딩 완료 후 재개할 수 있습니다.
  • Selective Hydration: 모든 콘텐츠가 도착하기 전에 클라이언트 측 hydration이 시작될 수 있습니다.
  • 점진적 향상(Progressive Enhancement): 사용자는 콘텐츠가 준비되는 대로 화면에서 확인할 수 있습니다.
• Express 서버 설정: express를 사용하여 정적 파일 서빙 및 기본 라우트 핸들러를 설정합니다.
• 구현 예제: renderToPipeableStream을 Express 서버에서 사용하는 포괄적인 구현을 보여줍니다. onShellReady, onAllReady, onError, onShellError와 같은 콜백을 통해 스트리밍 과정을 제어합니다. getHTMLTemplate 함수는 HTML 쉘과 애플리케이션 HTML을 분리하여 스트리밍을 용이하게 합니다.
• 렌더링 과정: 요청 시 서버는 즉시 React 렌더링을 시작합니다. 먼저 비동기 데이터에 의존하지 않는 앱의 "쉘(shell)"을 렌더링하고, Suspense 컴포넌트가 데이터를 성공적으로 로드하면 해당 HTML을 클라이언트로 스트리밍합니다.
• 클라이언트 측: 클라이언트는 HTML을 점진적으로 받아 렌더링하며, 필요한 경우 hydration을 시작합니다. Suspense 컴포넌트 안의 앱은 클라이언트에서도 Suspense를 지원해야 합니다.
• 고급 기능 및 Best Practices:
  • bootstrapScripts 및 bootstrapScriptContent를 사용하여 초기 데이터를 클라이언트에 전달하고 클라이언트 측 번들을 로드합니다.
  • StreamingErrorBoundary를 구현하여 특정 컴포넌트 오류가 전체 스트림을 중단시키는 것을 방지합니다.
  • 성능: TTFB 단축, 메모리 사용량 감소, 인지 성능 향상, SEO 개선 등의 이점을 제공합니다.
  • 주의사항: 복잡성 증가, 오류 처리 중요성, 캐싱 전략 조정 필요성, 디버깅의 어려움 등을 고려해야 합니다.
  • onShellReady 및 onAllReady에서 타임아웃 처리 및 res.headersSent 확인을 통해 스트리밍 오류를 방지합니다.
  • 데이터 페칭 컴포넌트 주위에 Suspense 경계를 배치하고, 스켈레톤 컴포넌트를 제공하며, 에러 바운더리를 적절히 배치합니다.
  • 타임아웃을 구현하여 응답 지연을 방지하고, 이벤트 리스너 및 타임아웃을 정리합니다.
  • 서버와 클라이언트 간의 일관된 렌더링을 보장하고, 불완전한 응답을 모니터링합니다.

개발 임팩트

renderToPipeableStream을 사용함으로써 개발자는 React 애플리케이션의 초기 로딩 속도를 대폭 개선하고 사용자 경험을 향상시킬 수 있습니다. 또한, 서버 리소스 사용을 최적화하여 더 많은 사용자 요청을 효율적으로 처리할 수 있게 됩니다. 이는 특히 사용자 경험이 중요한 현대 웹 애플리케이션 개발에 있어 중요한 이점을 제공합니다.

커뮤니티 반응

콘텐츠에서 직접적인 커뮤니티 반응을 언급하지는 않았으나, React 18의 스트리밍 SSR 기능 자체는 커뮤니티에서 큰 기대를 모으고 있으며, 성능 개선에 대한 긍정적인 반응이 예상됩니다. 개발자들은 Suspense와 함께 사용될 때의 동적인 렌더링 및 데이터 로딩 전략에 주목할 것으로 보입니다.