SPA와 MPA 비교 및 장단점 정리

SPA(Single Page Application)

인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 다운로드 되고 렌더링 된다.

이때 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다. 어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐이다.

그래서 SPA를 CSR(Client Side Rendering)이라고 부르기도 한다.

MPA(Multi Page application)

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링한다. 인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.

SPA와 MPA비교

[SPA와 MPA 비교그림]

SPA의 장점

• 좋은 사용자 경험
• 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고,
• 마찬가지로 페이지의 일부만 바뀌는 것이기 때문에 어플리케이션의 반응 또한 빠르다.
• 개발하기에 편하다.
• 서버의 사용없이도 개발을 할 수 있으며 크롬으로 디버깅하기도 쉽다.

SPA의 단점

• 초기 구동속도가 느리다.
• 사이트 최초 진입시에 어플리케이션에 필요한 모든 정적 리소스를 다 받기 때문이다.
• SEO 검색엔진 최적화에 불리하다.
• 모든 페이지가 하나의 HTML파일의 정보를 바라보고 있어 검색 서비스 노출이 어렵다.

MPA의 장점

• SEO 검색엔진 최적화에 유리하다
• MPA는 완성된 형태의 HTML파일을 서버로부터 받아오기 때문에 검색 엔진이 페이지를 크롤링하기 좋다.

MPA의 단점

• 새로운 페이지를 요청할 때마다 전체페이지를 다시 렌더링 하기 때문에 화면이 깜빡인다.
• 프론트엔드와 백엔드가 밀접하게 연관되어 있다.