[사전 미션 - CSR을 SSR로 재구성하기] - 마스터위(명재위) 미션 제출합니다.

[Jaymyong66]

🤔 생각해 보기

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

개인적 생각으로, "초기 페이지 렌더링을 어떻게 정의하는지에 따라 다르지 않을까?" 라고 생각했습니다.
초기 페이지 렌더링을 완벽한 페이지의 완성으로 본다면 SSR이 더 빠를 것 같습니다. 하지만 필요한 API 요청 등의 처리를 다 해서 HTML 파일을 보여주기에 사용자에게 초반에 빠르게 뭐라도 보여주기를 원한다면 CSR 방식이 더 유리하지 않을까 생각합니다.

SSR이 더 빠르게 느껴지는 이유는 초기 로딩 시 브라우저가 추가적인 데이터 요청이나 JavaScript 실행 없이도 완성된 index.html을 받아오기 때문입니다. 따라서 사용자에게 즉각적인 콘텐츠 표시를 하여 초기 로딩 시간을 단축시키기 때문입니다.

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

SSR은 사용자 요청이 있을 때 서버가 직접 API 요청 후 index.html에 삽입하고, 완성된 index.html 파일을 사용자에게 전달합니다. 서버가 API 통신과 템플릿 렌더링을 모두 담당하므로, 사용자는 받은 index.html을 그대로 화면에 표시하기만 하면 됩니다 따라서 초기 로딩 시 완성된 페이지를 사용자에게 제공할 수 있습니다.

CSR은 서버가 기본적인 index.html과 JS 파일만을 사용자에게 전달합니다. 사용자는 받은 JS 파일을를 실행하여 API 통신을 통해 서버로부터 가져옵니다. 이후 해당 데이터를 동적으로 화면에 렌더링합니다. 이때, 초기 로딩 시 빈 화면이나 로딩 상태가 표시될 수 있으며, 데이터가 모두 로드된 후에야 완전한 페이지를 볼 수 있습니다.