CSR vs SSR vs SSG_React

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의 구성

1. node.js로 구성된 FE 서버
2. python, django로 되어있는 BE 서버

• SSR 진행 과정

1. 유저가 브라우저에 / 를 입력
2. 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링
3. 만들어진 html 을 브라우저에게 보냄
4. 브라우저가 응답받은 html을 그림
5. html에 기능을 부여할 index.js 파일을 다운로드 받음(hydration)
6. 다운로드가 완료된 이후, go to second 링크를 클릭
7. /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 -> 미리 다 만들어 두니까 바뀔일이 거의 없는 페이지에 적합