SSR 및 S-쿠폰으로 웹 서비스 로딩 시간 개선하기

Toss 커뮤니티는 SSR을 사용하여 웹 서비스 로딩 시간을 44% 단축하여 월 97.6년을 절약했습니다.

### SSR 및 S 쿠폰으로 웹 서비스 로딩 시간 줄이기
토스 웹 서비스의 평균 로딩 시간은 2.5초로, 미리 생성된 HTML을 사용하고 자주 변경되는 CSS를 인라이닝하여 즉각적인 UI 렌더링이 가능합니다. Next.js도 사용되지만 번들 크기가 크기 때문에 특히 느린 네트워크나 저사양 디바이스에서는 로딩 시간이 길어질 수 있습니다. 또한 이 서비스는 개인화된 콘텐츠를 처리하므로 사용자에게 콘텐츠를 최종적으로 표시하기 전에 API 서버에 요청해야 합니다.

### 더 빠른 콘텐츠 표시를 위한 Toss 커뮤니티의 새로운 아키텍처
토스 커뮤니티는 캐싱을 사용하여 단 한 번의 요청으로 콘텐츠를 즉시 표시하는 새로운 아키텍처를 설계하여 로딩 시간을 크게 단축했습니다. 새로운 아키텍처는 요청을 Toss API 서버로 직접 전송함으로써 가장 큰 콘텐츠풀 페인트(LCP)를 44% 단축하여 평균 로딩 시간을 0.9초 단축했습니다. 이러한 개선으로 월 2억 8,500만 건의 Toss 웹 서비스 방문에 소요되는 로딩 시간이 97.6초 단축되었습니다.

### 토스 커뮤니티에서 S-Rice 구현하기
토스 커뮤니티는 서버 측 렌더링 프레임워크인 액세스를 사용하여 S-Rice를 구현했습니다. 서버 측에서 페이지 단위로 값을 가져오기 위해 XJ를 사용하여 SSR을 쉽게 구현했습니다. 이 구현에는 마이그레이션을 위해 기존 클라이언트 측에서 자체 프로퍼티로 데이터 가져오기 로직을 이동하는 작업이 포함되었으며, 컴포넌트 간에 불필요한 데이터 공유를 피하기 위해 컨텍스트 API를 사용하여 분리 문제를 해결했습니다. 또한 서버 측 렌더링 중에 서버에서 가져온 값을 관리하기 위해 단순성과 편의성을 우선시하여 React Query를 선택했습니다.

### 서버 측 값 가져오기를 위해 라우트 쿼리에서 Axios로 코드 변경하기
라우트 쿼리에서 Axios로의 전환은 서버 측에서 값을 가져오는 데 필수적이며, 모든 구성 요소에 영향을 미칩니다. 이 마이그레이션은 복잡한 서비스 코드의 경우 복잡성에 따라 마이그레이션 비용이 크게 증가하기 때문에 특히 중요합니다. 토스 커뮤니티는 네이트 쿼리의 유지보수 쿼리 및 SSR용 인터페이스와 유사한 소스 코드를 사용하여 100개 이상의 서비스에 대한 마이그레이션 비용을 효과적으로 절감했습니다. 유지 관리 리소스는 내부적으로 네트워크 커리의 뮤지컬을 사용하여 플랜트 측에서 값을 가져와 페이지 구성 요소의 속성에 대한 액세스를 제공하고 서버 측 렌더링 타이밍에 지정된 요구 사항6을 가져오는 방식으로 작동합니다.

### 향상된 코드 실행을 위한 서버 컴포넌트 소개
서버 컴포넌트라는 새로운 기능을 통해 컴포넌트 단위로 서버 측 렌더링이 가능해져 우회 전략이 필요 없게 됩니다. 서버 컴포넌트는 현재 알파 단계에 있지만 안정화되면 Toss 커뮤니티에 도입될 예정입니다. 서버 컴포넌트 사용으로 Toss 커뮤니티는 한 번의 요청으로 콘텐츠를 즉시 표시할 수 있게 되어 아키텍처와 마이그레이션 프로세스가 크게 개선되었습니다.

### SSR 및 S-쿠폰을 통한 웹 서비스 로딩 시간 단축
* 🕒  사용자들은 웹 서비스에 접속할 때 상당한 로딩 시간을 경험하는데, Toss의 웹 서비스는 로딩 시간이 평균 2.5초입니다.
* 🌐  Toss의 웹 서비스는 미리 생성된 HTML과 렌더링 차단 리소스를 통해 콘텐츠를 제공하며, 개인화된 콘텐츠와 API 서버 요청에는 Next.js가 사용됩니다.
* 📦  Toss 커뮤니티는 한 번의 요청으로 콘텐츠를 즉시 표시하기 위해 SSR과 캐시를 사용하는 새로운 아키텍처를 설계하여 로딩 시간을 평균 44% 단축했습니다.
* 📈  S-Coupons가 적용된 새로운 아키텍처는 로딩 시간을 평균 0.9초 단축하고 월 로딩 시간을 97.6년 절약하는 등 Web Vital 지표를 개선했습니다.
* 🖥️  Toss Community는 서버 측 렌더링에는 Access를, 데이터 관리에는 React Query를 사용하여 S-Rice를 구현함으로써 100개 이상의 서비스에 대한 마이그레이션 비용을 크게 절감했습니다.
* 🔍  S-Rice의 유지 관리 리소스는 뮤지컬을 사용하여 서버 측 렌더링 타이밍에 데이터를 가져오기 때문에 인터페이스를 변경하지 않고도 코드를 마이그레이션할 수 있습니다.
* ⚙️  토스 커뮤니티는 컴포넌트 단위의 서버 측 렌더링을 위한 서버 컴포넌트를 도입하여 웹 서비스 성능과 효율성을 더욱 개선할 계획입니다.

웹 서비스 로딩 시간의 문제점, 로딩 시간 단축을 위한 S-Coupons 구현, 서버 측 렌더링 및 데이터 관리를 위한 S-Rice 도입, 보다 효율적인 렌더링을 위한 향후 서버 컴포넌트 도입 계획 등 본문의 핵심을 세부 문장에 담았습니다.

Corely

Google 계정으로 시작하기

토스ㅣSLASH 22 - 잃어버린 유저의 시간을 찾아서 : 100년을 아껴준 SSR 이야기

토스ㅣSLASH 22 - 잃어버린 유저의 시간을 찾아서 : 100년을 아껴준 SSR 이야기

Corely가 요약한 다른 콘텐츠를 탐색해보세요.

추천 콘텐츠