SPA(Single Page Application)
하나의 페이지로 구성된 웹 애플리케이션으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾼다.
MPA(Multi Page Application)
전통적인 방식으로 다른 경로를 이동할 때마다 서버로부터 새로운 HTML파일을 받아와 렌더링한다.
일반적으로 SPA는 CSR방식을, MPA는 SSR방식으로 렌더링 한다.
SPA, MPA는 페이지의 수를 말하는 것이고, CSR, SSR은 렌더링을 어디에서 하냐는 것이다.
CSR
동작 과정
1.
브라우저가 서버에 컨텐츠 요청
2.
서버는 뼈대만 있는 HTML파일을 응답
3.
브라우저가 연결된 링크로 자바스크립트 파일 다운로드
4.
자바스크립트 파일로 동적으로 페이지를 생성해 보여준다.
장점
•
초기 로딩 이후에 구동 속도가 빠르다.
•
HTML을 생성하지 않고 파일만 넘겨주기 때문에 서버의 부하가 적다.
•
전체 페이지가 다시 로드되지 않기 때문에 화면 깜빡임이 없다.
•
자바스크립트 파일이 다운로드되고 실행돼야 페이지가 보이기 시작하기 때문에 TTV와 TTI가 같다.
TTV, TTI
TTV(Time To View): 페이지가 로드되어 보이기 시작하는 시점.
TTI(Time To Interactive): 페이지가 사용자와 상호작용 할 수 있는 상태가 되는 시점.
단점
•
자바스크립트 파일은 앱에서 필요한 로직 뿐만 아니라 앱을 구동하는 코드도 포함하기 때문에 크기가 크기 때문에 초기 로딩 속도가 느리다.
•
웹 크롤러는 HTML을 기반으로 검색하기 때문에 SEO에 불리하다. CSR도 크롤링이 가능하지만 여전히 SSR보다는 좋지 않다.
SSR
동작 과정
1.
브라우저가 서버에 컨텐츠 요청
2.
서버에서 필요한 데이터를 가져와 HTML생성 후 JS파일과 함께 응답
3.
브라우저는 전달 받은 페이지를 보여준다.
장점
•
첫 번째 페이지 로딩이 빠르다.
•
모든 컨텐츠가 HTML에 담긴채로 브라우저에 전달하기 때문에 SEO에 유리하다.
단점
•
페이지 이동 시 html 파일을 서버에서 다시 받아오기 때문에 깜빡이는 현상이 발생한다.
•
서버에 걸리는 부하가 크다.
•
HTML은 다운로드가 되어 빠르게 볼 수 있지만 자바스크립트가 다운로드 되기까지 반응이 없는 경우가 발생할 수 있다. (TTV와 TTI의 간극이 있다.)
SSG (Static Site Generation)
SSR은 클라이언트의 요청에 대해 HTML을 동적으로 생성해서 전달하지만, SSG는 미리 만들어둔 다음에 준다. 때문에 페이지의 내용이 거의 바뀌지 않는 경우에 적합하다.
정리
Q. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 차이는?
CSR | SSR | |
장점 | 화면 깜빡임이 없다.
초기 로딩 이후 구동 속도 빠름
TTV와 TTI가 같다.
서버 부하 분산 | 초기 구동 속도가 빠름
SEO에 유리하다 |
단점 | 초기 로딩 속도 느림
SEO에 불리함 | 페이지 이동시 화면 깜빡임 있음
TTV와 TTI 사이 간극이 있다
서버 부하가 있다. |
Reference
