MPA(Multiple Page Application)은 HTML, CSS, Javascript로 만들어지던 초기의 웹 형태입니다.
과거에는 MPA라는 단어나 개념이 존재하지 않았지만 SPA의 개념이 등장하면서 만들어진 단어입니다.
각 페이지를 서로 다른 html 파일로 이루어져 있어서 메뉴 이동과 같은 페이지를 접근할 때 새로운 html파일을 받아오는 형식입니다.
이 방식은 새로운 html파일을 받아오는 동안 로딩 시간을 필요로 했는데, 그 로딩시간동안 페이지가 깜빡 거리게 됩니다.
MPA방식에서는 모바일 어플리케이션처럼 부드럽지도 않고, 모든 페이지에서 공통되는 부분(헤더, 푸터, 등…)도 계속해서 새로이 불러들어야만 했습니다.
따라서 기존의 방식에서 특정 부분만 변하고 새로 그리는 방식인 SPA가 탄생하게 되었습니다.
SPA(Single Page Application)는 MPA와는 달리 단 하나의 페이지로만 웹 어플리케이션을 만듭니다.
이 구현방식을 CSR(Client Side Rendering)이라 하는데 메뉴 이동을 할 때 모바일 앱처럼 자연스럽게 이동하여 사용자들에게도 친숙하였습니다.
개발자들에게도 React, Angular, Vue와 같은 기술들이 생겨나면서 기존의 JQuery를 통한 MPA방식보다 코드 관리도 수월해지고(컴포넌트 단위 개발) 구현하기도 쉬워졌습니다.
또한 Front-End와 Back-End의 관심사를 완전히 분리시켜 REST API방식을 채용하고 개발 속도가 향상되었습니다.
하지만 이 CSR에도 문제점이 존재합니다.
페이지 하나만을 이용해 어플리케이션을 구성하기에, 어플리케이션의 크기가 커질수록 초기 로딩시간이 오래걸리게 됩니다.
또한 javascript를 통해 동적으로 페이지를 변환시키기에 검색엔진은 이 사이트의 내용을 인식하지 못합니다.
이에 아예 불가능하진 않아도 SEO(Search Engine Optimization)을 적용하기 힘들고, 또한 적용하더라도 불리해서 구글이나 네이버와 같은 검색엔전에서 노출되기 어려웠습니다.
SPA의 치명적인 단점들을 해결하면서, 동시에 초기 MPA에서 가졌던 단점들을 해결하는 방식으로 Next.js와 같은 프레임워크들이 등장하기 시작했습니다.
SPA 방식에서 사용하던 컴포넌트 단위의 개발을 지원하고, 페이지 깜빡임을 pre-rendering기법과 특별한 기술들(nextjs의 Link태그)을 활용해 SPA처럼 부드럽게 구현하였습니다.
해당 기술들은 Next js 관련 포스팅을 통해 다음번에 다루겠습니다.