우아한 테크톡
[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 사이 간극이 있음 - 서버 부하가 있음 |
< 영상 >