전통적 SSR의 한계를 넘어: 당근마켓이 도입한 Streaming SSR

최근 당근마켓을 사용하면서 UX가 괜찮다고 느꼇는데요. 이미 Streaming SSR을 도입하고 있네요. Streaming SSR은 전통적인 SSR 한계를 극복하는 렌더링 기법인데요

SSR vs Streaming SSR

• 기존 SSR: 전체 HTML을 생성한 후 한 번에 전송하기 때문에 모든 데이터 fetching과 렌더링이 완료될때 까지 기다립니다. 완전한 페이지를 한 번에 받기 때문에 유저는 일정시간동안 빈 화면을 봅니다.

• Streaming SSR: Streaming SSR은 HTML을 Chunk(조각) 단위로 부분 스트리밍하여 전송합니다. 가령 API 페칭이 필요없는 GNB, 네비게이션 등은 먼저 렌더링을 하고 이후에 데이터 fetching이 된 부분은 나중에 순차적으로 렌더링 합니다. 따라서, 중요 컨텐츠를 먼저 사용자에게 전달할 수 있어 전체 로딩 시간은 동일하더라도, 사용자가 체감하는 속도가 더 빨라집니다

Streaming SSR 구현 방법

당근마켓의 StremingSSR은 아래와 같은 단계로 이루어집니다.

1. 데이터 프리페칭 및 직렬화: TanStack Query로 데이터를 미리 가져옵니다. 이후 dehydrate를 사용해 쿼리 상태를 JSON 으로 직렬화(SSR에서 가져온 데이터를 클라이언트로 전달) 합니다. 이를 통해 직렬화된 상태는 HTML 응답에 포함되어 클라이언트로 전송됩니다.

2. HTML 스트리밍: ReactDOM의 renderToPipeableSteream함수를 이용해서 HTML 스트림을 청크 단위로 스트리밍합니다. 이를 통해 HTML부분 렌더링을 적용 합니다.

3. TanstackQuery 하이드레이션: dehydrate 를 통해 JSON 형태로 직렬화된 데이터를 TanstackQuery의 HydrationBounary 함수를 사용하여 TanstackQuery 캐시에 hydrate 합니다. 이 과정을 통해 TanStack Query 캐시에는 서버에서 가져온 데이터가 들어있게됩니다.

국내 IT 기업도 점차 UX의 중요성에 대해 인식하고 기술적으로 많은 시도와 도입을 하는것 같습니다. 고객 경험을 중시하는 이런 시도는 사용자 만족도 향상과 비즈니스 성과 개선으로 이어지는데요. 이런 시도를 통해 당근마켓이 국내를 넘어 글로벌 시장에서도 더욱 성공적으로 성장하기를 기대해 봅니다.

https://medium.com/daangn/%EC%9E%85%EC%82%AC-1%EA%B0%9C%EC%9B%94%EC%B0%A8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%9E%90%EC%B2%B4-%EA%B8%B0%EC%88%A0-%EC%98%A8%EB%B3%B4%EB%94%A9-streaming-ssr%ED%8E%B8-aabaee57f660