SSR 그리고 사용자 경험

내가 CSR과 SSR을 고를 때 가장 중요하게 생각한 점은 이제까지 SEO였다. 전 회사에서 쇼피파이처럼 고객들에게 Template을 통해 사이트를 만들어줄 때도 이 문제로 VueCli에서 Nuxt로 마이그레이션이 있다 했다.

대시보드와 같이 무조건 첫 페이지에 오는 경우가 아니라 특정 상품을 검색 했을 때 유입할 수 있는 경우에만 고려했었다. 최근 자바스크립트를 공부하다 사례를 듣는데 script defer와 async 그리고 스트림을 사용해서 이미지를 보내는게 왜 좋은지 등에 관한 이야기 였는데 (Next hydration)을 듣는데 오 했다. 로딩에서 스켈레톤UI도 입혀주고 하는게 여러 앱을 경험하며 느꼈을땐 빈 공간이 채워져서 예쁘게 채워져서 빈 공간이 생기는거 보다 좋아보인다고만 생각했는데, 1. 고객 입장에서 상품명 가격과 같은 텍스트를 먼저 확인하고 (데이터나 이미지는 단계적으로 로딩) 구매 결정과 같은 원하는 목적을 빨리 달성 시켜 사용자에게 추천상품을 더 둘러볼 체력을 제공할 수 있다 2. 커넥션이 붙어 있다면 빨리 들여보내고 내보내서 서버에 부하를 줄일 수 있다는 내용이었다.

아마존에서 이러한 내용으로 0.1초인가의 속도를 증가시켰을때 엄청난 매출증대가 있었다고 한다. (모바일이라 나중에 확인할게요)

백엔드와 DB는 자주 터지고 실제로 고객이 장바구니를 못담는다거나 구매를 못하는 심각한 문제가 발생했어서 MSA나 퍼포먼스 증가가 크게 와닿았던거랑 다르게 FE에서는 빌드타임을 개선시켜 개발자 경험을 좋게 하는 점만 생각했었는데 앞으로 이런, 혹은 다른 퍼포먼스적 향상을 시켜보고 Data 통해 검증해보고 싶다.