: Multi Page Application의 약자로 여러 페이지로 구성된 웹 어플리케이션
사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식
요청할 때마다 서버로부터 새로운 파일을 불러옴
: Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션
브라우저에 최초에 한번 페이지 전체를 로드, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩
SPA는 현재 웹개발의 트랜드로 볼 수 있고, react와 vue, 앵귤러와 같은 자바스크립트 프레임워크 등이 spa의 방식을 가지고 있음
초기 로딩 이후, 요청 할 때마다 json 파일의 데이터만 받아옴
: MPA는 SSR 방식을 채택
서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
- 장점
- 전체가 한번에 그려짐
- 검색엔진최적화에 유리(모든 데이터가 이미 html에 담겨진채로 브라우저에 전달되기 때문)
- 빠른 초기 로딩(서버로부터 화면을 렌더 하기 위한 필수적인 요소를 먼저 가져오기 때문)
- 단점
- 로딩 속도가 오래 걸림
- 매번 페이지를 요철할 때마다 새로고침(깜박임, 사용자 경험이 떨어짐)
- TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 존재
- 서버 부화(새로운 요청이 생길 때마다 바뀌지 않아도 되는 부분도 렌더링)
: SPA는 CSR 방식을 채택
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식
서버 사이드 렌더링 방식과 다른 점은 모든 js 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점
- 장점
- 사용자에게 먼저 화면을 빠르게 보여줌
- 사용자 친화적(깜박임 x)
- 초기화면 렌더링 이후 빠른 속도로 렌더링
- 단점
- 데이터까지 받아오는 전체적인 시간은 사실 더 걸릴 수 있음
- 첫 화면에 로딩창만 보여지게 되면 검색엔진 순위가 확 떨어질 수도 있음(웹 크롤러가 페이지를 색인화 하려고 하면 내용의 빈 페이지처럼 보이게 됨)
- 초기 로딩 속도 느림(모든 js 파일을 다운 받아와야 해서)
=> 서비스와 콘텐츠의 성격에 따라 달라짐