[사전 미션 - CSR을 SSR로 재구성하기] - 텐텐(최진실) 미션 제출합니다.

[chlwlstlf]

🤔 생각해 보기

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

1-1. 사용자 관점에서 CSR과 SSR에서 각각 어떻게 페이지를 로딩하는지와 느끼는 초기 로딩 속도에 어떤 차이가 있었는지 생각해 보자.

CSR은 로딩 중일 때 아예 흰 화면이 되었고 그 후 데이터를 하나씩 가져오며 화면을 그려서 느리게 느껴졌다.

SSR은 로딩 중일 때를 거의 경험하지 못 했고 탭이나 페이지 전체 레이아웃 부분 등 API 데이터를 제외한 기본 콘텐츠는 이미 화면에 렌더링되어 있어서 빠르게 느껴졌다.

1-2. SSR이 왜 더 빠르게 느껴지는지 이유를 설명해 보자.

SSR이 사용자가 처음 페이지를 볼 수 있는 시점이 더 빠르기 때문이다. 자바스크립트가 완료되지 않더라도 사용자에게 의미 있는 콘텐츠를 즉시 보여줄 수 있어, 실제 로딩 속도가 빠르게 느껴진다.

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

SSR에서는 서버가 클라이언트 요청을 받으면 index.html을 기반으로 서버에서 동적으로 데이터를 처리해 완성된 HTML을 클라이언트에 전달한다. 이로 인해 사용자는 브라우저에서 즉시 화면을 볼 수 있으며, 자바스크립트는 이후에 로드되어 상호작용이 가능해진다.

CSR에서는 index.html이 기본적으로 빈 상태로 전달되고, 클라이언트가 자바스크립트를 로드한 후 필요한 데이터를 서버에서 비동기적으로 가져와 화면을 구성한다. 이 때문에 CSR은 초기 로딩이 느리지만, 이후 상호작용은 클라이언트에서 처리되어 빠르게 진행된다.

즉, SSR은 서버에서 데이터를 렌더링해 즉시 화면을 제공하고, CSR은 클라이언트가 데이터를 가져와 동적으로 화면을 구성한다.