토스ㅣSLASH 22 - 잃어버린 유저의 시간을 찾아서 : 100년을 아껴준 SSR 이야기
SLASH 토스 · YouTube
AI 핵심 요약
토스 웹 서비스는 기존에 HTML과 JavaScript 번들을 받은 뒤 브라우저에서 API를 호출해야 콘텐츠를 보여줘, 사용자가 평균 2.5초가량 로딩을 기다리는 문제가 있었다. 이를 해결하기 위해 요청의 사용자 토큰을 바탕으로 프론트엔드 서버가 토스 API에서 데이터를 미리 가져오고, Next.js 기반 SSR로 콘텐츠가 포함된 HTML을 응답하도록 바꿨다. React Query를 사용하는 100개가 넘는 서비스의 전환 부담을 줄이기 위해 SSR용 데이터 패칭 추상화인 ‘유지 리소스’를 만들어 기존 컴포넌트 인터페이스를 유지했다. 그 결과 주요 서비스의 LCP가 평균 44% 단축됐고, 월 방문 횟수와 절감 시간을 바탕으로 연간 약 100년의 대기 시간을 아낄 수 있다고 계산했다.
- SSR에서는 HTML 요청에 사용자 식별 정보를 포함하면 서버가 개인화 데이터를 미리 가져와 완성된 화면을 응답할 수 있다.
- LCP의 75백분위 값을 기준으로 개선 효과를 확인하면 실제 사용자 경험에 가까운 성능 변화를 살필 수 있다.
- 데이터를 페이지에서 자식 컴포넌트로 전달하는 방식은 관심사 분리를 해칠 수 있으므로, 마이그레이션 시 컴포넌트 인터페이스 변경을 최소화하는 방법을 고려한다.
- 기존 React Query 사용 코드를 유지하면서 SSR 데이터를 제공하는 추상화 계층을 두면 대규모 서비스 전환 비용을 줄일 수 있다.
- 서버 컴포넌트는 컴포넌트 단위 렌더링으로 데이터 전달 문제를 줄일 수 있지만, 발표 당시에는 알파 단계라 안정성을 확인한 뒤 도입할 계획이었다.
소개
토스 웹페이지의 한 달 방문 횟수는 약 2억 번에 달합니다. 많은 횟수만큼 유저가 기다리는 시간도 상당했을 겁니다. 서버 사이드 렌더링(SSR)을 이용해 유저의 시간을 아낀 경험을 소개합니다. 김도환 / 토스 Frontend DevOps Engineer 발표 자료 👉🏻 https://bit.ly/3NOx8r9 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
토스의 얼굴, 홈 화면에서의 매끄러운 사용자 경험은 어디에서 비롯되는 것일까요? 다양한 서비스 운영 효율화를 위한 토스 홈팀의 무기, ‘Server Driven UI’를 소개합니다. 윤중현 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3CglOzR 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #homedst #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가...
프론트엔드 백엔드
컨퍼런스 SLASH
토스ㅣSLASH 22 - 어떻게 안정적인 서비스를 빠르게, 자주 출시할 것인가?
컨퍼런스 SLASH
토스페이먼츠는 가맹점이 빠르게 변화하는 시장에서 승리할 수 있도록, 사업자가 필요한 기능을 적시에 안정적으로 제공하는 것을 목표로 합니다. 안정적인 서비스를 빠르게, 자주 출시하기 위한 노력과 그로부터 얻은 러닝을 공유합니다. 하태호 / 토스 DevOps Engineer 발표 자료 👉🏻 https://bit.ly/3xrlgEu 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
데브옵스 · 인프라 애자일 · 협업
컨퍼런스 SLASH
서비스가 지속적으로 최고의 사용자 경험을 제공하기 위해서는 개발자 경험(DX)이 뒷받침되어야 합니다. 토스에서 SSR을 도입하면서 겪었던 다양한 어려움과 이 를 수호하기 위한 해결법을 공유합니다. 박서진 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3ObL3Y9 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 데브옵스 · 인프라
컨퍼런스 SLASH
토스ㅣSLASH 22 - 스크래핑으로 우아한 조회 경험을 만든 방법
컨퍼런스 SLASH
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
컨퍼런스 SLASH
API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 로드맵 2개에 담김
컨퍼런스 SLASH