[사전 미션 - CSR을 SSR로 재구성하기] - 올리(이예진) 미션 제출합니다.

[ImxYJL]

🤔 생각해 보기

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

속도와 Layout Shift 면에서 SSR이 조금 더 우세했습니다.

사용자 관점에서, CSR은 브라우저가 HTML 파일만 받은 뒤 JavaScript 파일을 로드한 다음에야 API 요청을 통해 데이터를 받아와서 렌더링합니다. 이 과정이 완료되기 전까지 사용자는 빈 화면이나 로딩 화면을 먼저 보게 될 수 있습니다.

반면 SSR에서는 서버에서 HTML 파일을 미리 렌더링해서 브라우저에 전달합니다. 따라서 사용자는 페이지가 로딩된 즉시 완성된 콘텐츠를 볼 수 있습니다. JavaScript를 모두 불러오기 전임에도 화면에 콘텐츠가 나오기 때문에 초기 로딩이 빠르게 느껴집니다. (JavaScript는 초기 렌더 이후에 조금씩 로드됩니다.)

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

SSR

• 렌더링 흐름: 서버에서 데이터 요청 → 데이터를 바탕으로 HTML 렌더링 → 사용자에게 HTML 전달 → 브라우저에서 HTML 렌더링
• 장점: (사용자 관점에서) 빠른 초기 렌더링, SEO에 유리
• 단점: 페이지마다 서버 요청 -> 서버 부하 우려

CSR

• 렌더링 흐름: 브라우저가 HTML, JavaScript 를 얻어옴 → JavaScript 실행 → 클라이언트에서 데이터 요청 → 데이터를 받아 화면 렌더링
• 장점: 적은 서버 부하, 페이지 간 이동
• 단점: 비교적 느린 초기 렌더링, SEO에 불리