항해99를 수료하고 나서 나름 5일?6일? 휴식(?) 기간을 가졌다.
쫑파티도 다녀오고 100일 만에 그동안 못잤던 잠도 푹 자보고 게임도 했다.
나름 힐링이 많이 됬다... 쉴만큼 쉰거같기도 하고 TypeScript로 사이드 프로젝트도 하기로해서 다시 열심히 공부를 해보려한다.
CSR
- Client쪽에서 렌더링을하는 방식이다.
Client Side Rendering의 약자이다.
CSR은 렌더링이 클라이언트 쪽에서 일어난다.
서버는 요청을 받고 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
- User가 Website 요청을 보낸다.
- CDN*이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
- 클라이언트는 HTML과 JS를 다운로드 받는다. ( 이때는 빈화면이 출력된다. )
- JS를 다운로드 받는다.
- 다운이 완료된 JS가 실행된다. data를 위한 API가 호출된다. ( 호출되기전 data 자리엔 placeholder가 들어간다. )
- 서버가 API로부터의 요청에 응답한다.
- API로부터 받아온 data를 placeholder 자리에 넣어주면 상호작용이 가능한 페이지가 뜬다.
CDN* : 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
SSR
- 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
Server Side Rendering의 약자.
SSR은 렌더링이 서버 쪽에서 일어난다.
- User가 Website 요청을 보낸다.
- Server는 렌더링 준비된 html파일을 만든다.
- 서버에서 보내준 준비된 html을 즉시 렌더링 하지만 상호작용은 할수없다. ( 자바스크립트가 아직 읽히지 않았기 때문이다. )
- 클라이언트가 자바스크립트를 다운받는다.
- 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 상호작용은 할수없다. 이때의 사용자 조작을 기억하고 있는다.
- 브라우저가 Javascript 프레임워크를 실행한다.
- JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
CSR과 SSR의 차이
- 로딩속도
- 초기 로딩 속도의 경우 SSR이 더 빠르다.
- 다른 페이지로 이동하는 경우엔 CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그렇기 때문에 CSR보다 느리다.
- 서버 자원 사용
- SSR이 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용한다.
- 검색 엔진 최적화
- SSR이 검색 엔진 최적화에 더 유리하다.
Junior Developer🔥