[사전 미션 - CSR을 SSR로 재구성하기] - 파슬리(김윤아) 미션 제출합니다.

[anttiey]

🤔 생각해 보기

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

CSR	SSR

CSR에서 초기 페이지 로딩 시간은 대략 1초 정도 소요되었고, SSR에서는 거의 지연 시간이 없었습니다.

SSR이 더 빠르게 느껴지는 이유는 서버에서 이미 필요한 데이터를 받아, 완전한 HTML 페이지를 클라이언트에 전송하기 때문입니다. 브라우저는 즉시 이 HTML을 렌더링할 수 있어, 완전한 페이지가 더 빠르게 표시된다고 느끼게 됩니다.

반면 CSR의 경우 서버에서 전달받은 index.html 에는 초기 데이터가 없고, 브라우저가 자바스크립트 파일을 추가로 다운로드한 후에야 데이터를 가져와 화면을 렌더링할 수 있어, 사용자가 완전한 페이지를 보는 데 시간이 더 걸리게 됩니다. 따라서 페이지가 완전히 로드되기 전까지 불완전한 상태의 화면을 보게 되기 때문에 초기 페이지 로딩 시간이 길다고 느끼게 됩니다.

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

서버 측에서 데이터를 가져오는 방식, SSR은 클라이언트가 페이지를 요청하면, 서버에서 필요한 데이터를 먼저 처리한 후, 완전한 HTML 페이지를 생성하여 클라이언트에 전달하는 방식입니다. 서버는 API를 호출해 데이터를 가져오고, 이를 포함한 완성된 HTML 파일을 생성하여 브라우저에 전송합니다. 브라우저는 이 HTML을 받아 즉시 화면에 렌더링할 수 있으며, 추가적인 데이터 요청 없이도 사용자는 바로 완성된 페이지를 볼 수 있습니다.

클라이언트 측에서 데이터를 가져오는 방식, CSR은 서버가 기본 HTML과 자바스크립트 파일만 클라이언트에 전송하고, 실제 데이터 처리는 클라이언트 측에서 자바스크립트를 통해 이루어집니다. 클라이언트가 페이지를 요청하면, 서버는 데이터가 없는 기본 HTML과 자바스크립트 파일을 전달합니다. 브라우저는 이를 다운로드한 후 자바스크립트를 실행하고, API를 호출해 데이터를 가져옵니다. 데이터를 받아오면 자바스크립트가 DOM을 동적으로 조작하여 화면에 데이터를 렌더링합니다.