[사전 미션 - CSR을 SSR로 재구성하기] - 헤일리(최혜림) 미션 제출합니다.

[healim01]

🤔 생각해 보기

1. CSR과 SSR에서 초기 페이지 로딩 시간에 어떤 차이가 있었을까? 그 이유는?

네트워크를 3G로 설정한 극한의 상황에서 CSR과 SSR을 비교했을 때, 페이지 로딩 방식과 속도에서 큰 차이가 있음을 확인할 수 있었습니다. CSR에서는 페이지를 로딩하는 데 SSR보다 두 배 이상의 시간이 소요되었습니다.

SSR은 API 데이터가 로드되기 전에 미리 기본 레이아웃을 그려주고, 이후 데이터를 차근차근 추가하는 방식으로 작동했습니다. 이 덕분에 사용자 입장에서는 데이터 로딩 속도가 훨씬 빠르게 느껴졌습니다. 반면, CSR은 초기 로딩 동안 흰 배경을 보여준 후, 레이아웃과 데이터를 한꺼번에 빠르게 그려주는 방식이기 때문에 사용자는 콘텐츠가 표시되기까지 기다려야 하는 불편함을 경험하게 됩니다. 이러한 차이 때문에 SSR이 초기 로딩 경험에서 훨씬 더 빠르게 느껴지게 되었습니다.

CSR (Client-Side Rendering)	SSR (Server-Side Rendering)

2. 서버 측에서 데이터를 가져오는 방식과 클라이언트 측에서 데이터를 가져오는 방식을 비교해서 설명한다면?

SSR에서는 클라이언트가 요청을 보내면, 서버가 요청된 페이지의 HTML을 동적으로 생성합니다. 필요한 데이터를 서버에서 직접 가져와 페이지와 함께 렌더링하여, 최종적으로 모두 완성된 HTML이 클라이언트에 전달합니다. 그러다보니 사용자는 초기 페이지 로딩 시 완전한 콘텐츠를 곧바로 확인할 수 있었습니다.

반면, CSR에서는 초기 HTML은 빈 템플릿으로 로드된 후, 클라이언트 측에서 JavaScript를 통해 API 호출을 진행하여 데이터를 가져오는 방식입니다. 그래서 데이터는 페이지가 렌더링된 후에 클라이언트에서 처리되고 화면에 표시됩니다. 초기 로딩 시 사용자에게 보여지는 콘텐츠가 적고, 데이터가 로드될 때까지 기다려야 하는 상황이 발생했습니다.

즉! SSR은 페이지 로딩 시 서버에서 모든 콘텐츠를 처리하고 전달하는 반면, CSR은 클라이언트에서 데이터를 비동기적으로 가져와야 하므로 초기 로딩 경험에서 SSR 방식이 훨씬 개선된 결과물을 보여주고 있었습니다.