쇼핑몰 이동 동선 UX와 렌더링 차이(CSR, SSR)

쇼핑몰 이동 구조 상품 목록 페이지에서 상품 목록을 클릭하면, 상품 상세 페이지로 이동하는 구조이다. 그리고 다시 목록으로 돌아가 위 동작을 반복한다.

CSR vs SSR: 뒤로가기 UX의 차이 상세 페이지에서 뒤로가기를 누르면 이전 페이지(목록 페이지)로 이동한다. 아마 history.back()일 것이다.

이때 스크롤 차이가 발생한다. CSR 방식: 캐시 상태를 활용해서 목록으로 돌아가면 스크롤 위치가 유지된다.

SSR 방식: 페이지를 새로 불러온다. 스크롤이 초기화되는 거다.

예상되는 문제 쇼핑몰 특성상 반복적인 동작이 발생한다. 목록 페이지에서 상품을 찾아 클릭하고 상세 페이지에서 보고 뒤로 가면 다시 목록 페이지이다.

그럼 다시 동일한 동작을 한다. 목록 → 상세 → 목록 → 상세 → 목록 ...

그런데 여기서 목록이 유지가 안 된다?! 어디까지 스크롤 했는지 찾아야 한다.

쇼핑 경험이 저하되면서 이탈하는 포인트가 되겠다. 무한 스크롤 방식이라면 체감이 더 클 것이다..

대...