SPA vs MPA

☝🏻SPA가 뭐야

SPA(Single Page Application)는 하나의 페이지로 구성된 웹 어플리케이션이다. 브라우저에 처음 들어갔을 때 최초에 한 번 페이지 전체를 로드하고 그 이후부터는 특정 필요시되는 부분만 *Ajax를 통해서 데이터를 바인딩하는 웹 페이지 구성 방식이다.
단일 페이지 어플이케이션은 요즘 웹개발에서 트랜드라고 볼 수 있다. React, Vue, 앵귤러와 같은 JS 프레임워크 등이 SPA 형식을 갖고있다.

*Ajax란?
비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자. 

하이퍼텍스트 표기언어(HTML)만으로 어려운 다양한 작업을 웹페이지에서 
구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술. 
별도 프로그램을 설치하거나 웹페이지를 다시 로딩하지 않고도 메뉴 등 
화면상의 객체를 자유롭게 움직이고 다룰 수 있다. 
비슷한 기능의 액티브X나 플래시 등에 비해 가볍고 속도가 빨라 차세대 웹 기술로 각광받고 있다.
[네이버 지식백과] 에이잭스 [AJAX] (한경 경제용어사전)

SPA 쓰면 뭐가 좋아?

1. 전체 페이지를 업데이트할 필요가 없기 때문에 사용자가 다른 메뉴의 탭을 누를 때마다 화면의 깜빡임이 없다.

2. 필요한 리소스만 부분적으로 로딩된다. 서버에게 정적 리소스를 한 번만 요청하고 받은 데이터를 전부 저장해둔다. 그 데이터가 캐시(Cache)다.

3. 컴포넌트별로 개발이 용이하다.

4. 모바일 앱 개발을 염두한다면 동일한 API를 사용할 수 있다.

장점만 있는 건 아니다.

1. 최초에 페이지의 리소스를 모두 받아오기 때문에 초기 구동이 느리다.

2. 검색 엔진 최적화(SEO)가 어렵다.

✋🏻MPA가 뭐야

여러 개의 페이지로 구성된 어플리케이션이다. SSR(Server Side Application)방식으로 렌더링한다. 그래서 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다. 페이지를 이동하거나 새로고침을 하면 전체 페이지가 리렌더링된다.

MPA 쓰면 뭐가 좋아?

1. 검색 엔진 최적화(SEO)가 용이하다. 완성된 형태의 HTML 파일을 서버로부터 전달받아서 검색엔진이 페이지를 크롤링 하기에 적합하다.

2. 서버에서 이미 렌더링해서 가져오기 때문에 첫 로딩이 빠르다. 하지만 클라이언트가 JavaScript파일을 모두 다운로드하고 적용하기 전까지 각각의 기능은 동작하지 않는다.

MPA 단점은?

1. 역시나 화면의 깜빡임이다. 페이지 요청마다 리로딩이 발생하기 때문이다.

2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다. 서버 렌더링에 따른 부하는 덤이다.

3. 모바일 앱 개발할 때 백엔드 작업이 추가적으로 필요하다.