[사전 미션 - CSR을 SSR로 재구성하기] - 리안(오혜린) 미션 제출합니다.

[ooherin]

🤔 생각해 보기

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

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

CSR 은 우선 api 로 데이터가 들어오기 전에, 클라이언트 측에서 받아온 css, js로 레이아웃을 보여주고, api 로 데이터가 들어오면 영화 목록이 그제서야 채워지게 됩니다. 이때문에, 첫 페이지를 렌더링할 때 SSR 에 비해 느리고 답답한 느낌을 줍니다.

반면 SSR 은 완성된 html 을 서버에서 만들어서 불러오기 때문에, 처음부터 영화 데이터가 잘 들어가진 페이지를 볼 수 있게 됩니다. CSR 에 비해 빨리 렌더링 되는 느낌을 받았습니다. 다만 탭의 버튼을 눌러 카테고리를 전환할 때, CSR 이 SSR 보다 더 부드럽게 바뀌는 느낌이 들었습니다. 아무래도 SSR 은 데이터가 바뀌면 전체 페이지를 다시 그리고 보내주기 때문에 그런 것 같습니다.

csr	ssr
2024-10-03.4.56.47.mov	2024-10-03.4.56.59.mov

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

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

csr

1. 서버는 최소한의 HTML, CSS, JavaScript 파일을 클라이언트에게 전달한다.
2. 전달받은 클라이언트(브라우저)는 JavaScript 파일을 파싱하고 실행하여 초기 페이지를 렌더링한다. 이때 JS가 실행되기 전까지는 빈 화면이나 로딩 상태를 볼 수 있다.
3. 페이지 내 이벤트 등으로 데이터가 변경되어야 할 경우, 클라이언트는 서버에 API 요청을 보낸다.
4. 서버는 해당 API 요청에 대한 JSON 데이터를 전달한다.
5. 클라이언트는 서버에서 받은 데이터를 사용하여 필요한 부분만 DOM을 다시 렌더링한다. 전체 페이지가 새로고침되지 않고, 변경된 부분만 갱신된다.

ssr

1. 서버는 클라이언트의 요청을 받으면, 필요한 데이터를 포함하여 완성된 HTML을 생성한 후 전달한다.
2. 클라이언트는 전달받은 HTML을 그대로 렌더링하기 때문에, 초기 화면이 빠르게 표시되고 데이터 로딩 전 빈 화면을 보지 않는다.
3. 페이지 내 이벤트로 콘텐츠가 변경될 필요가 있을 때, 클라이언트는 서버에 새로운 HTML을 요청한다.
4. 서버는 클라이언트의 요청에 따라 새로운 페이지를 HTML 형태로 다시 렌더링하여 전달한다.
5. 클라이언트는 서버에서 새로운 HTML이 올 때까지 기다린다.
6. 서버에서 받은 HTML이 로드되면, 기존 페이지를 대체하고 새로고침된 페이지가 브라우저에 표시된다.

ssr 과 csr 의 가장 큰 차이점은

1. 초기 페이지의 로딩 방식
2. 이벤트 등으로 인한 데이터가 바뀔 때 처리 방식
   인 것 같습니다!