SPA(Single Page Application), MPA(Multiple Page Application)

포스팅 제목을 보면 알 수 있듯이, SPA는 Single Page Application, 한개의 페이지로 구성된 어플리케이션, MPA는 Multiple Page Application, 여러개의 페이지로 구성된 어플리케이션이다.

MPA 는 새로운 페이지를 요청할 때마다 정적리소스를 다운로드하고, 이데 따라 전체페이지를 렌더링한다. SPA는 반대로 어플리케이션에 필요한 모든 정적 데이터를 최초, 한번에 다운로드한다. 새로운 페ㅣ지에 대한 요청이 잇을 경우, 그에 필요한 데이터만을 새로 받아서 페이지를 갱신한다.

그렇다면 각각의 장단점을 알아보자.

• SPA의 장점

* 좋은 사용자 경험!
 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다!
 (웹사이트의 성능과 직결된다.)
 * 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다.
 페이지의 일부만 바뀌는 것이기 때문에 application의 반응이 빠르다.
 개발하기에 더 심플하다.
 * 서버의 사용없이도 개발을 시작할 수 있다.
 * 크롬으로 디버깅하기 쉽다.
 * 로컬 데이터를 효과적으로 캐시(cache)* 할 수 있다.
 * SPA의 Appication은 서버에게 정적리소스를 한번만 요청한다.
 * 그리고 받은 데이터는 전부 저장해놓는다. (이 데이터는 오프라인에서도 사용 가능하다.)
 (참고) `캐시(cache)`란 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.
 * 캐시에 데이터를 미리 복사해 놓으면 계산이나 별도의 접근 시간 없이
 더 빠른 속도로 데이터에 접근할 수 있다.

• MPA의 장점

* SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 유리하다.
* MPA는 완성된 형태의 HTML파일을 서버로부터 전달받는다.
==> 따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.
(참고) `SEO` 는 홈페이지 혹은 콘텐츠를 검색 결과의 상단에 위치시키는 작업이다.
검색 엔진은 '크롤링(Crawling, 웹 크롤러로 웹사이트 관련 데이터를 가져오는 과정)'과
'인덱싱(Indexing, 크롤링을 통해 얻은 정보를 검색 색인에 저장하는 과정)'을 통해
정보를 카테고리화 한다.

• SPA 의 단점

- 초기 구동 속도가 느리다.(초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문!)
- SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에서 불리하다.
이를 보완하기 위해 SPA에서도 단점(SEO 등)을 극복하기 위해
CSR이 아닌 SSR방식을 적용하는 케이스가 있었다.

• MPA의 단점

- 새로운 페이지를 이동하면 화면이 깜빡인다.
(새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문이다.)
- 프론트엔드와 백엔드가 밀접하게 연관되어있다. (Tightly coupled)
- 프론트엔드와 백엔드가 서로 연관이 높아 개발과정이 복잡해질 수 있다.

장점과 단점을 잘 비교해서 필요한 방식을 선택하도록 하자.

그래서 SPA, MPA를 언제 사용하나요

어느경우에 어떠한 방식을 선택 해야하는가에 대해서는 정해져있는 것이 없지만, 개발중인 서비스가 어떠한 것을 목표로하고, 어떠한 고객을 타겟팅하고있는지, SEO적인 관점이 중요한지 등 여러가지 고려를 해본 후 정하면 될 것 같다.