[사전 미션 - CSR을 SSR로 재구성하기] - 파란(안영훈) 미션 제출합니다.

[greetings1012]

늦게 제출해서 죄송합니다 😭

🤔 생각해 보기

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

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

CSR

SSR

사용자 관점에서 CSR은 별점, 사진 등 데이터를 불러오는 데 시간이 오래 걸린다고 느껴지는 반면, SSR의 경우에는 일반 네트워크 환경에서 거의 즉시 데이터를 로딩했습니다.
초기 CSS 등 레이아웃 로딩 또한 SSR의 속도가 훨씬 빠르다고 느껴씃ㅂ니다.

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

request의 개수와 resource 크기, finish time에 큰 차이가 있었습니다. CSR의 경우 렌더링에는 서버의 개입이 없어 처음부터 모든 리소스를 불러오는 반면, SSR의 경우는 초기 화면의 필요한 리소스만 요청한 후 사용자가 요청할 때 추가 리소스를 fetch하는 방식이기 때문이라고 생각합니다.

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

• 서버와 클라이언트가 각각 데이터를 처리하는 방식의 전반적인 흐름을 설명해 보자.

서버는 클라이언트로부터 요청을 받으면, 데이터베이스나 다른 서버와의 통신을 통해 필요한 데이터를 받습니다.
받은 데이터를 기반으로 서버에서 HTML을 생성하거나 JSON 등의 형식으로 데이터를 준비합니다.
준비된 데이터를 클라이언트에게 응답으로 전송합니다.

클라이언트는 서버로부터 받은 데이터를 화면에 표시합니다.
CSR의 경우, 클라이언트는 주로 JavaScript를 사용하여 데이터를 받아와 DOM을 조작하여 화면을 업데이트합니다.
클라이언트는 사용자 입력을 처리하고, 필요시 서버에 추가 요청을 보냅니다.

• SSR의 경우, index.html을 기반으로 동적으로 콘텐츠를 렌더링하는 과정을 설명하며 CSR 렌더링 과정과 비교할 수 있다.

SSR: 서버에서 모든 HTML을 생성하여 클라이언트에 전송하고, 클라이언트는 받은 HTML을 즉시 렌더링할 수 있습니다.
CSR: 클라이언트가 데이터를 받아 계산한 후 HTML에 적용합니다.

CSR
서버는 데이터를 클라이언트에 전송합니다.
클라이언트는 JavaScript를 통해 데이터를 받아와 HTML을 동적으로 생성합니다.
초기 로딩은 느릴 수 있지만, 이후 페이지 전환이 빠릅니다.
서버 부하는 적지만, 클라이언트의 성능에 의존합니다.

• 코드 레벨이 아니라, 두 방식이 어떻게 데이터를 처리하고 화면에 반영하는지를 개괄적으로 그려 보거나 글로 설명해 보자.

SSR: 클라이언트 요청 → 서버에서 데이터 처리 및 HTML 생성 → 클라이언트에 HTML 전송 → 클라이언트에서 즉시 렌더링

CSR: 클라이언트 요청 → 서버에서 데이터 전송 (JSON 등) → 클라이언트에서 JavaScript로 데이터 처리 및 HTML 생성