[사전 미션 - CSR을 SSR로 재구성하기] - 렛서(김다은) 미션 제출합니다.

[llqqssttyy]

🤔 생각해 보기

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

CSR에서는 서버가 초기 요청에 대해 빈 HTML 문서와 JavaScript 파일만 전달합니다.
이후 브라우저가 JavaScript를 로드하고 실행하여, 필요한 데이터를 API를 통해 비동기적으로 가져와서 페이지를 완성합니다.
이로 인해 초기 로딩 시 화면이 바로 표시되지 않고, JavaScript 파일이 로드되고 데이터가 모두 받아와진 후에야 페이지가 완성됩니다.
사용자 관점에서 페이지가 완전히 렌더링될 때까지 시간이 더 오래 걸리는 것처럼 느껴질 수 있습니다.

반면 SSR에서는 서버가 클라이언트가 요청한 시점에 필요한 데이터를 모두 가져와 완성된 HTML 문서를 렌더링하여 전달합니다.
클라이언트는 최초 응답으로 HTML이 포함된 완성된 페이지를 전달받아, 브라우저가 즉시 화면을 렌더링할 수 있습니다.
따라서, 사용자 관점에서는 초기 로딩 속도가 더 빠른 것처럼 느껴집니다.

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

SSR 방식에서는 서버가 클라이언트 요청을 받으면,

• 필요한 데이터를 데이터베이스나 api 요청을 통해 가져와서 HTML 템플릿과 함께 렌더링합니다.
• 이 렌더링된 HTML은 서버에서 클라이언트로 전송됩니다.
• 클라이언트는 해당 HTML을 그대로 렌더링하여 화면에 표시합니다.

CSR 방식에서는

• 클라이언트가 초기 HTML과 JavaScript 파일을 서버로부터 전달받습니다.
• JavaScript 파일이 로드되고 실행된 후, 브라우저가 API를 호출하여 데이터를 비동기적으로 가져옵니다.
• 브라우저는 이 데이터를 바탕으로 화면을 렌더링합니다.