CSR, SSR, SPA, MPA 정리

CSR (Client-Side Rendering)

작동 방식

1. 웹 브라우저(클라이언트)에서 요청
2. 웹 서버에서 데이터가 없는 HTML, Static 파일을 우선 반환 (빈페이지)
3. 2. 진행 중 클라이언트가 서버에 데이터를 요청
4. 불러온 데이터를 JS로 View를 컨트롤하며 화면이 나타나게 됨.

 

특징

- 모든 작업을 Clinet Side에서 수행하는 방식

- TTI (Time to Interaction, 페이지 요청시 활동 시작 가능 할 때까지 걸리는 시간)과 TTV(Time to View, 페이지가 보일 때 까지 걸리는 시간)이 동시에 이루어지기 때문에 효율적인 Loading 고려 필요

- Low SEO (Search Engine Optimization) : Body가 대부분 비어있어 SEO가 잘 동작하지 않아 검색 노출이 힘듬

- ex) Vue, React, Angular 등 핫한 SPA 기반의 프레임워크가 해당

 

SSR (Server-Side Rendering)

작동 방식

1. 웹 브라우저(클라이언트)에서 요청
2. 웹 서버에서 데이터까지 전부 삽입하여 완성 된 HTML을 반환 
3. 불러온 웹과 데이터를 JS가 컨트롤하여 화면이 나타남

 

특징 

- 모든 작업을 Server Side에서 수행, Server 단에서 Data를 이용, HTML과 제어용 CS를 만들어 Clinet에 전달

- Server Side Overhead 발생 가능성 높음

- Initial Page Load가 빠름

- 컨텐츠가 Body에 담겨 SEO(Search Engine Optimization)이 잘 동작

- TTV TTI 과정, TTI 이전에 JS 파일을 가져오는 기간동안 Interaction이 불가해 이 TTI Time 구간을 줄이는 것이 목표

- HTML 로딩이 빠른데 Interaction에 오랜 시간 소요 => 더 매끄러운 UI/UX 목표 고민 필요

- 페이지 이동시 불필요한 템플릿도 중복해서 로딩

- ex) Django, Flask 등 (render_template() 함수)

SPA (Single Page Application)

작동 방식

1. 웹 브라우저(클라이언트)에서 요청
2. 최초 서버에서 페이지를 로딩
3. 이후부터는 동적으로 페이지를 구성해 새로운 페이지를 받아오지 않고 내용만 수정

특징

- Initial Rendering 속도가 느림 => JS 파일들 Bundling 후 전달 받아 Low Speed)

- Initial Rendering 문제 Code Splitting으로 보완 가능 (Clinet가 꼭 필요한 부분만 최초 보내는 것이 핵심)

- 서버요청 반응속도 빠름

- UX가 좋고 UI 빠르게 개발 가능

- CEO 검색 최적화 되기가 어려움

- Server의 템플릿 연산을 Clinet로 분산하여 성능 향상 ↑

- 필요한 Resource만 부분적으로 Loading 하여 성능 향상 ↑

 

- ex) Vue, React, Angular, JS Framework, Next.js

 

MPA (Multi Page Application)

작동 방식

1. 웹 브라우저(클라이언트)에서 요청
2. 최초 서버에서 페이지 로딩
3. 이후 페이지 전환시 해당 페이지의 화면, 데이터를 다 받아옴.

 

특징

- 초기 랜더링 속도 SPA에 비해 비교적 빠른편 (데이터를 해당 페이지 것만) 

- 서버 Request에 대한 최종 Reseponse 느린편

- UX / UI 가 비교적 불리 (화면전환시 깜빡임, 클릭시 Reload)

- Low CEO (검색 최적화에 용이)

- ex) 사이드바, 메뉴바 클릭시 새화면 reloading 

참고링크

- https://velog.io/@rudwnd33/TIL-9%EC%9B%94-20%EC%9D%BC
- https://bangu4.tistory.com/164 
- https://velog.io/@kysung95/SSR-vs-CSR-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EC%84%A0%ED%83%9D%EC%9D%80-feat.-ssg#static-sites-1995-mid