SPA vs MPA

SPA

SPA(Single Page Application)는 한 개의 Page로 구성된 Application이다.
SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다.
그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.
즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주눈 방식이다.
SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다.

장점

• 자연스러운 사용자경험 - 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 깜빡 거림이 없다.
• 필요한 리소스만 부분적으로 로딩 - SPA의 Applicatio은 서버에게 정적리소를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장한다.
• 서버의 템플릿 연산을 클라이언트로 분산한다.
• 컴포넌트별 개발 용이하다.
• 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능하다.

단점

• 자바스크립트 파일을 번들링해서 한 번에 받기 때문에 초기 구동속도가느리다.
• 검색엔진최적화(SEO)가 어려움

하지만 SPA 방식이 모두가 CSR인 것은 아니다.

MPA

MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.
MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 된다.
매번 전체 페이지가 다시 렌더링 된다.
MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

장점

• SEO 관점에서 유리하다 - MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
• 첫 로딩 매우 짧다 - 서버에서 이미 렌더링해 가져오기 때문, 그러나 클라이언트가 js 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지 않는다.

단점

• 새로운 페이지를 이동하면 깜빡인다.
• 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다.
• 서버 렌더링에 따른 부하가 심하다.
• 모바일 앱 개발시 추가적인 백엔드 작업이 필요, 개발이 복잡해질수 있다.

SPA vs MPA

정리하자면 두가지 모두 장단점이 존재한다.
프로젝트 상황에 맞게 사용하면 된다.
또한 SPA를 SSR방식으로도 렌더링 할 수 있다.

출처 : 하나몬