[사전 미션 - CSR을 SSR로 재구성하기] - 빙봉(김윤경) 미션 제출합니다.

[Yoonkyoungme]

🤔 생각해 보기

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

• 💡 답변 요령
  • 사용자 관점에서 CSR과 SSR에서 각각 어떻게 페이지를 로딩하는지와 느끼는 초기 로딩 속도에 어떤 차이가 있었는지 생각해 보자.
  • SSR이 왜 더 빠르게 느껴지는지 이유를 설명해 보자.

CSR	SSR

Lighthouse 측정결과를 보면, SSR의 LCP가 0.9초인 반면, CSR에서는 2.6초로, 약 3배 정도 SSR이 더 빠른 로딩 속도를 보여줍니다.
CSR에서는 브라우저가 처음에 HTML 구조와 JavaScript 파일만을 받아오고, 이후 JavaScript가 실행되어 필요한 데이터를 API에서 받아와 DOM에 동적으로 콘텐츠를 렌더링합니다. 이 과정에서 시간이 더 걸리므로, 초기 로딩 시간이 상대적으로 느리게 느껴집니다.
반면 SSR에서는 서버에서 이미 완성된 HTML 페이지를 클라이언트에게 전달해 주기 때문에, 브라우저가 HTML을 받아오는 즉시 렌더링을 완료할 수 있습니다. 이로 인해 사용자 입장에서는 초기 로딩이 훨씬 빠르게 느껴집니다.

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

• 💡 답변 요령
  • 서버와 클라이언트가 각각 데이터를 처리하는 방식의 전반적인 흐름을 설명해 보자.
  • SSR의 경우, index.html을 기반으로 동적으로 콘텐츠를 렌더링하는 과정을 설명하며 CSR 렌더링 과정과 비교할 수 있다.
  • 코드 레벨이 아니라, 두 방식이 어떻게 데이터를 처리하고 화면에 반영하는지를 개괄적으로 그려 보거나 글로 설명해 보자.

CSR 방식에서는 서버가 기본적인 HTML과 JavaScript만을 전달합니다. 실제 데이터는 클라이언트 측에서 브라우저가 JavaScript를 실행한 후, 별도로 서버에 요청하여 가져오게 됩니다. 브라우저가 처음에 빈 화면을 띄운 후 JavaScript 실행 및 데이터 수신 과정을 거쳐야 하므로, 페이지가 완전히 렌더링되는 데 시간이 더 걸리게 됩니다.

SSR 방식에서는 사용자가 페이지 요청을 하면 서버에서 즉시 데이터를 가져오고, 이 데이터를 기반으로 완성된 HTML을 생성합니다. 브라우저는 서버로부터 받은 HTML을 그대로 렌더링하면 되기 때문에, 브라우저에서 데이터를 다시 요청하거나 처리하는 시간이 거의 없습니다. 페이지의 구조와 데이터가 모두 서버에서 처리되므로 초기 로딩이 빠르고, 특히 검색 엔진 최적화(SEO)에도 유리합니다.