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

[seongjinme]

🤔 생각해 보기

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

CSR	SSR

• SSR의 로딩 시간이 CSR보다 훨씬 짧았습니다.
  • 페이지 안에서 가장 큰 콘텐츠를 그리는 데 걸리는 시간(LCP)을 기준으로 약 6배 가까운 차이를 보였습니다.
• SSR의 로딩이 더 빠르게 느껴진 이유는, CSR과 달리 모든 콘텐츠를 서버 측에서 구성하여 전달하기에 클라이언트 단에서의 작업이 그만큼 줄어들기 때문입니다.
  • CSR의 경우, API를 통해 비동기로 영화 데이터를 요청하여 받은 후 콘텐츠를 구성하여 그리는 모든 작업의 책임이 클라이언트에게 넘겨집니다. 따라서 이에 소요되는 시간 동안 사용자는 (별도의 Fallback 컴포넌트가 없다면) 빈 화면을 바라보아야 합니다.
  • SSR의 경우, 이 콘텐츠 구성의 작업 책임은 서버가 가져갑니다. 클라이언트는 서버에서 전해주는 완성된 형태의 콘텐츠를 브라우저에 즉각 그려주기만 하면 됩니다. 덕분에 사용자 입장에서는 큰 딜레이 없이 자신이 원하는 결과가 빠르게 화면에 나타난다고 인식할 수 있습니다.

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

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

SSR 방식 (서버 측에서 데이터를 가져오는 방식)

• 클라이언트가 서버 측으로 페이지에 대한 요청을 보냅니다.
• 서버는 요청 내용을 바탕으로 API를 통해 필요한 데이터를 받습니다.
• 데이터 수신이 완료되면, 서버는 자신이 가진 템플릿(index.html)을 바탕으로 데이터 콘텐츠가 반영된 HTML을 생성하여 클라이언트로 전송합니다.
• 클라이언트는 서버 측으로부터 완성된 형태의 HTML을 수신받아 브라우저에 렌더링합니다.

CSR 방식 (클라이언트 측에서 데이터를 가져오는 방식)

• 클라이언트가 서버로부터 템플릿(index.html)과 JS 파일을 받아 로드합니다.
• 로드된 JS 파일의 코드를 바탕으로 클라이언트 측의 브라우저가 API 요청을 보내어 데이터를 가져옵니다.
• 데이터 수신이 완료되면, 브라우저는 로드된 JS 코드를 바탕으로 데이터를 렌더링하여 화면에 출력되고 있는 템플릿(index.html) 코드에 이를 반영합니다.

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