SSR의 기쁨과 슬픔: 렌더링의 변화의 흐름을 통해 알아보는 SSR과 Streaming SSR | 인프콘2023

인프런 inflearn·인프콘 2023 2023·2023년·

#react#nodejs#webview#web-performance#streaming-ssr#frontend#server-side-rendering

AI 요약

정적 웹과 서버 템플릿에서 CSR·SPA를 거쳐 현대적 SSR과 Streaming SSR에 이른 렌더링의 변화를 'HTML을 누가 만드는가'라는 기준으로 정리한다. 당근 동네생활 웹뷰가 초기 로딩을 줄이려 자체 React SSR을 도입하고 Suspense·느린 API의 한계를 Streaming으로 보완한 실제 구현을, 얻는 것과 치르는 운영 비용까지 함께 이야기한다.

핵심 포인트

서버 템플릿은 뷰 로직 중복과 흰 화면 지연이, CSR·SPA는 동적 메타데이터·SEO 약점과 큰 번들 초기 실행·메모리 누수가 한계였고, Node.js가 서버·브라우저의 동일 뷰 로직 공유를 가능케 해 현대적 SSR이 등장
당근은 Fastify + 사내 boilerplate + Stackflow로 SSR을 구성했지만 renderToString이 Suspense를 만나면 CSR로 전환돼, React Query 선조회 + 고정 UI 렌더링의 절충만으로도 웹뷰 체감 속도를 크게 개선
Streaming SSR은 Suspense 밖 셸을 먼저 보내고 renderToPipeableStream 청크를 점진 전달하며, 배포별 정적 번들을 S3에 누적해 구버전 404를 막고 빌드타임 변수를 런타임으로 옮겨 중복 빌드를 제거

왜 읽나SSR·Streaming 도입을 검토하며 서버 운영·배포·관측 비용까지 저울질해야 하는 프론트엔드 팀에게, 검증된 프레임워크 선택의 판단 근거를 준다.

챕터별 상세

010:06 – 9:15

정적 웹에서 서버 템플릿까지

렌더링을 화면용 HTML 문자열을 누가 만드는가라는 기준으로 정의하고 정적 파일, CGI, 애플리케이션 서버 템플릿의 순서로 웹의 변화를 따라간다. 서버 템플릿은 데이터베이스와 API 결과를 바탕으로 동적인 HTML을 만들었지만 같은 뷰 로직이 서버와 브라우저에 중복되고 수정이 어긋나는 문제가 있었다. 모든 데이터가 준비될 때까지 흰 화면을 보여 주는 응답 지연도 복잡한 UI와 상호작용이 늘면서 더 큰 한계가 됐다.

브라우저와 JavaScript의 발전으로 뷰 로직과 라우팅을 클라이언트에 모으고 정적 자산을 CDN에 배포하는 CSR·SPA가 보편화됐다. 서버 관리와 트래픽 확장 부담이 줄고 API가 느려도 로딩 상태를 먼저 보여 줄 수 있지만, 모든 경로가 같은 index.html을 받아 동적 메타데이터와 검색 노출이 어렵다. 큰 JavaScript 번들의 초기 실행 비용과 새로고침 없는 장시간 사용에서의 메모리 누수도 모바일 체감 성능을 떨어뜨린다.

Node.js 덕분에 서버와 브라우저가 React 같은 동일한 언어·뷰 로직을 공유하면서 과거 서버 템플릿과 다른 현대적 SSR이 가능해졌다. 서버가 데이터 조회와 HTML 생성을 먼저 수행해 초기 콘텐츠와 메타데이터를 내려 주므로 큰 클라이언트 번들의 실행을 기다리는 것보다 빠를 수 있다. 반면 직접 운영할 서버, 오토스케일링·로그·메모리 관리와 느린 컨테이너 배포가 생기고 프레임워크가 감춘 복잡성을 모르면 장애 원인을 찾기 어려워진다.

네이티브 화면을 React 웹뷰로 바꾸면서 번들 다운로드와 실행으로 생길 이질적인 초기 지연을 줄이기 위해 당근 내부 인프라와 Fastify 기반 SSR을 선택한다. 사내 보일러플레이트와 Stackflow를 결합했지만 renderToString이 Suspense를 만나면 클라이언트 렌더링으로 전환돼 완전한 SSR을 구현하지 못했다. 서버에서 React Query 데이터를 미리 가져오고 고정 UI를 렌더링하는 절충만으로도 웹뷰가 체감될 만큼 빨라졌지만 모니터링과 확장, 배포 운영의 책임이 프론트엔드 팀에 추가됐다.

Streaming SSR은 API가 모두 끝날 때까지 기다리지 않고 Suspense 밖의 셸을 먼저 보낸 뒤 renderToPipeableStream의 청크를 점진적으로 전달한다. Fastify에서 템플릿의 앞뒤와 React 스트림을 제너레이터로 결합해 로딩 UI를 즉시 보여 줬고, 실제 동네생활 웹뷰에서도 느린 데이터와 무관한 빠른 첫 화면을 구현했다. 배포별 정적 번들을 S3에 누적해 구버전 404를 막고 빌드타임 변수를 런타임으로 옮겨 중복 빌드를 없앴지만, 서버·인프라 지식과 디버깅 비용 때문에 가능하면 검증된 프레임워크를 쓰라고 조언한다.