CSR(Client Side Rendering)
개념
- React, Vue, Angular
- SPA페이지는 CSR 렌더링 방식으로 사용, 이 둘은 같지 않음
- 첫 페이지가 클라이언트측에서 렌더링 된다
- 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드
- 최초로 불러온 html의 내용은 비어있음 (html, body 태그만 존재)
- js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작
- 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 JavaScript 차원에서 새로운 화면을 그려내는 것
장점
- 화면 깜빡임이 없음
- 초기 로딩 이후 구동 속도가 빠름
- TTV와 TTI 사이 간극이 없음
- 서버 부하 분산
- 백엔드 호출을 최소화 할 수 있음
-> 최초 호출때만 html, js, css 를 요청
-> 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청(ex. JSON)
단점
- 초기 로딩 속도가 느림
- SEO에 불리함
ex)
- 비조리형 배달 음식
- 식당에서 재료만 포장하여 고객에게 배송
- 재료를 받은 고객이 최종 조리하여 음식 완성 후 식사
- 최종 형태를 갖추게 되는 단계가 클라이언트 단이라는 점에서 CSR
SSR(Server Side Rendering)
개념
- PHP, JSP
- MPA 페이지는 SSR 렌더링 방식으로 사용, 이 둘은 같지 않음
- 첫 페이지가 서버측에서 렌더링 됩니다
장점
- 초기 구동 속도가 빠름
- SEO(Search Engine Optimization / 웹 크롤러가 각 사이트를 돌아다니며 조사를 하는 상황이라 가정)에 유리함
- UX 측면에서 유리
- 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있음.
단점
- 화면 깜빡임이 있음
- TTV와 TTI 사이 간극이 있음
- 서버 부하가 있음
- 첫 로딩이 매우 느려질 수 있음
ex)
- 조리형 배달 음식
- 식당에서 모든 조리 완료 후 고객에게 배송
- 조리가 완료된 음식을 고객이 받아 바로 식사
- 최종 형태를 갖추게 되는 단계가 서버 단이라는 점에서 SSR
원리 & 구조
- SSR의 구성
- node.js로 구성된 FE 서버
- python, django로 되어있는 BE 서버
- SSR 진행 과정
- 유저가 브라우저에 / 를 입력
- 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링
- 만들어진 html 을 브라우저에게 보냄
- 브라우저가 응답받은 html을 그림
- html에 기능을 부여할 index.js 파일을 다운로드 받음(hydration)
- 다운로드가 완료된 이후, go to second 링크를 클릭
- /second로 라우팅하고 second 페이지 코드를 생성
**hydration
- 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 말한다.
- render와 동일하지만, dom은 이미 그려져 있는 상태이기 때문에 event listener만 부착하는 식으로 작동.
**hydrate()
ReactDOM.hydrate(elemet, container [, callback])- render와 동일하지만 html 콘텐츠가 reactDOMServer로 렌더링 된 컨테이너에 이벤트를 보충하기 위해 사용된다.
SSG(Static Site Generation)
개념
- Static Rendering 이라고도 함
- 서버측에서 렌더링 되기 때문에 SSR과 비슷한점이 있다
- 하지만 언제 만들어졌냐에 따라 차이점이 있음
SSR -> 요청시 즉시 만들기 떄문에 미리 만들어두기 어려움
SSG -> 미리 다 만들어 두니까 바뀔일이 거의 없는 페이지에 적합
:D