우아한 테크톡

[10분 테코톡] 🎨 신세한탄의 CSR&SSR

dauneee 2022. 2. 20. 15:58

[ SPA - Single Page Application ]

 


- 하나의 페이지로 구성된 웹 어플리케이션

- 어플리케이션을 이용할 때 헤더는 고정되어 있고 메뉴를 선택하면 메인화면 부분 혹은 클릭한 부분만 바뀌는 웹사이트

 

[ MPA - Multi Page Application ]

 


- 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 새로 렌더링하는
  전통적인 웹페이지 구성방식

- 전환 시마다 화면이 깜빡이는 단점이 있음

 


[ CSR와 SSR의 관계 ]

 

 
페이지 구성 방식
렌더링 방식
SPA  MPA
CSR SSR

 

SPA :  웹 어플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운로드하고 그 이후 새로운 페이지 요청이 있을 때,페이지 갱신에 필요한 데이터만 전달 받아서 클라이언트에서 페이지만 갱신하기 때문에 자연스러운 렌더링 방식으로 CSR을 사용

 

MPA : 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 렌더링 방식으로 SSR을 사용

 


 

[ CSR과 SSR의 개념 ]

 

CSR ( Client Side Rendering ) - 클라이언트 측에서 렌더링을 하는 방식

 

SSR ( Server Side Rendering )

- 서버측에서 렌더링을 하는 방식이며,

  요청할 때마다 즉시 만들어서 데이터가 달라지는 미리 만들어두기 어려운 페이지에 적합하다.

 

SSG ( Static Site Generation )

- 스테틱 렌더링이라 불리는 방식이며, 서버에 미리 만들어서 변경될 사항이 거의 없는 페이지에 적합하다.

 


 

 

[ CSR과 SSR의 장단점 ]

 

 

- CSR

 

장점 단점

- 화면 깜빡임 없음

- 초기 로딩 이후 구동 속도가 빠름

-
TTV( Time To View )와TTI( Time To Interval )
사이 간극이 없음

- 서버 부하 분산
 - 초기 로딩 속도가 느림

- SEO(검색 엔진 최적화)에 불리함

 

 

- SSR

 

장점 단점
- 초기 구동 속도가 빠름

- SEO에 유리함

- 화면 깜빡임이 있음

- TTV와 TTI 사이 간극이 있음

- 서버 부하가 있음

 

 


< 영상 >

 

https://youtu.be/YuqB8D6eCKE