[사전 미션 - CSR을 SSR로 재구성하기] - 바다(손해영) 미션 제출합니다.

[BadaHertz52]

🍀 구현 영상

-.Clipchamp.mp4

🤔 생각해 보기

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

SSR의 초기 렌더링 시간이 CSR보다 짧았습니다. 영화 데이터가 반영된 부분이 화면에 로딩 되는 시간이 SSR이 더 빨랐습니다.

CSR은 js를 로드하고 실행한 후에 렌더링이 이루어지므로 초기 로딩이 느리게 느껴집니다. 그에 반해 SSR은 서버에서 미리 HTML을 렌더링해 전달하므로 초기 로딩이 빠르게 느껴집니다.

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

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

• CSR: 브라우저에서 JavaScript 실행 후 데이터를 받아 클라이언트에서 페이지를 동적으로 렌더링.
• SSR: 서버에서 데이터를 받아 HTML을 완성한 후 클라이언트로 전달하여 초기 페이지를 렌더링.

비교 표

구분	CSR	SSR
HTML 생성	클라이언트가 js 실행 후 동적으로 생성	서버가 데이터를 기반으로 완성된 HTML을 생성
API 요청 타이밍	js 실행 후 클라이언트에서 API 요청	서버에서 페이지 요청 시 API 요청
데이터 반영 시점	API 응답 후 클라이언트에서 렌더링	API 응답 후 서버에서 렌더링하여 HTML에 포함
초기 로딩 속도	느림 (빈 화면 → 데이터 로드 후 렌더링)	빠름 (완성된 HTML 전달)

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

[woowahan-cron]

여러분~!
바다를 제외하고 이 글을 클릭한 여러분들은 분명히, 다른 크루들은 어떻게 PR을 썼는지를 살펴보려고 하셨을 텐데요...
제가 바다 사전 미션 리뷰하는 척.. 🎣 낚아봤습니다.

왜냐구요?

사전 미션 PR을 남기실 때는 내가 생각하는 방법이 실제 동작하는 방식과 달라도 괜찮다는 걸 알려드리기 위해서요!
왜 그렇게 생각하는지만 구체적이고 명확하게 적어주세요~!

본 미션을 통해 깊이 있게 공부하고 내가 그때 왜 그런 생각을 했었는지, 왜 그게 지금 생각하는 것과 같거나 다른지를 알아가는 과정에서 더 의미있는 경험이라고 생각하기 때문이에요. 그러니 너무 부담 갖지 말아주세요 😁