[사전 미션 - CSR을 SSR로 재구성하기] - 웨디(박세현) 미션 제출합니다.

[pakxe]

🤔 생각해 보기

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

[csr]

2024-10-03.9.45.14.1.mov

[ssr]

2024-10-03.9.45.47.1.mov

csr에서는 틀만있는 html이었다가 데이터가 채워졌다.
ssr에서는 미리 채워진 html이 보여졌다. 레이아웃쉬프트가 없다.
csr보다 ssr이 초기 페이지 로딩 시간이 빠르다.

둘 다 이미지는 클라이언트에서 요청해서 불러오기 때문에 처음부턴 보이지 않았다.

csr 영상을 보면 html자체는 금방 받아오지만, csr의 경우 html이 껍데기라서 흰 화면이 보이는 시간이 굉장히 긴걸 알 수 있다. 그리고 이 껍데기를 채워줄 js를 요청 -> 다운로드 -> 실행 -> 렌더링 하기까지의 시간이 지나야 비로소 채워진다. 다만 껍데기가 채워져도 api 리스폰스로 채워야하는 곳도 빈 채로 남아있다. api도 요청 -> 다운로드 -> 렌더링의 과정이 필요하다.. 전체적으로 아래 과정을 거쳐 초기 화면이 완성된다고 추측된다.

반면 ssr에서는 js 파일을 요청 -> 다운로드하는 네트워크 통신 과정이 생략되기 때문에(서버 안에 모듈이 다 있기 때문에) 서버에선 완성된 html을 금방 보내줄 수 있다. 브라우저에서는 렌더링(파싱하고 그리고..)만 하면된다. 그래서 빠르다.

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

SSR

1. 클라이언트가 서버한테 html을 달라고 한다.
2. 서버에서 api요청하고 필요한 js 모듈로 완성된 html을 그린다.
3. 클라이언트는 완성된 html을 받아 렌더링만 한다.

CSR

1. 클라이언트가 서버한테 html을 달라고 한다.
2. 서버는 준비된 껍데기 html을 바로 보낸다.
3. html에서 호출하고 있는 js, 그 js가 호출하고 있는 다른 js등 필요한 모듈들과 api들을 전부 호출하여 다운로드한다.
4. js를 실행해 html에 렌더링된 모습을 끼워넣는다.

3. 어떻게 활용하는게 좋을까

꽤 다수의 js 다운로드 필요 또는 레이아웃 쉬프트가 일어나면 별로인 페이지 라면 ssr을 사용하는게 좋아보인다.

그리고 모달이나 클릭할 때 바뀌는 것들, 처음에는 보일 필요가 없지만 사용자 이벤트에 따라 보이게 되는 것들은 서버에서 만들어 제공할 필요가 없겠다.

결국 처음 페이지의 모습을 위해서는 ssr을 사용하고 그 이후의 변하는 모습들은 csr을 사용하는게 어떤가...

궁금한거

렌더링에 얼마만큼의 시간이 걸리는지는 어디서 확인할 수 있을까?