SPA vs MPA (SPA와 MPA비교)

SPA (Single Page Application)

단일 페이지 어플리케이션: 웹 어플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 업데이트에 필요한 데이터만을 전달받아 페이지를 업데이트 함

브라우저에서 최초 한 번 서버에 요청하여 페이지 전체 로드 후 특정 변경 일어나는 부분만 axios, ajax 등의 기술을 사용하여 데이터를 바인딩한다. (axios등을 이용하여 주로 서버(백엔드)에서 전달한 json데이터를 주고받는다.)

 

 

현재 사용하는 프론트엔드 UI라이브러리 (React), 프레임워크 (Vue)를 이용해 프로젝트를 진행하는 경우 대부분 SPA형식을 따른다.

모던 프론트엔드 기술(React, Vue, Angular)등의 등장으로 SPA방식이 크게 유행했다. SPA의 방식으로 인해 프론트와 백엔드간의 경계가 명확하다.

 

SPA 문제는 자바스크립트로 DOM요소에 접근해 변경이 자주 일어나면 성능이 저하할 수 있다는 것이다. 

→  이를 해결하기 위해 Virtual DOM을 사용하며, React, Vue모두 Virtual DOM을 사용한다.

Virtual DOM에 대한 설명은 추후 작성하겠다.

 

 

---

MPA (Multi Page Application)

다중 페이지 어플리케이션: 새로운 페이지를 요청할 때마다 랜더링된 정적 리소스가 다운로드 된다. 각 페이지는 서버로부터 완전한 HTML컨텐츠를 받아와 랜더링한다. 페이지를 이동하거나 새로고침하면 전체 페이지가 다시 랜더링 된다. 

전통적인 웹 어플리케이션 개발 방식으로 JSP, 타임리프와 같은 템플릿 언어는 대부분 MPA방식이다. 따라서 프론트와 백엔드 개발자간의 경계가 불명확하다. 

 

 

 

---

 

SPA와 MPA 비교

	SPA	MPA
랜더링 방식	주로 CSR	SSR
초기 랜더링 속도	느림	빠름
서버부화	상대적으로 적다	심하다
UX	좋다	새로고침의 깜빡임이 발생하여 좋지 않음
UI 개발	효율적	반복된 코드를 계속 작성해야함
유지보수 (UI)	해당 부분만 수정 가능	전체 페이지를 수정
seo (검색 최적화)	어렵다	좋다
언어	JS 프레임워크 (React, Vue, Angular)	JSP, PHP

위와 같은 장단점이 있다. 

 

얼핏보면 SPA가 최신 기술이고, MPA의 단점을 극복할 수 있는 신기술이라고 생각할 수 있다.

하지만 SPA는 SEO(검색엔진최적화)가 어렵다는 치명적인 단점이 존재한다.

(참고, SPA는 JavaScript로 구현되는데 자바스크립트를 읽지 못하는 검색엔진에서 색인 할 만한 컨텐츠가 존재하지 않는다. 반면, MPA는 JavaScript가 동작하기 전에도 완성된 형태의 HTML을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하기 적합하다)

 

요즘같이 온라인 비즈니스와 웹사이트의 노출과, 사용자들에게 컨텐츠를 제공하여 홍보하는 것이 경쟁력인 시대에 SEO는 기업의 큰 경쟁력이라고 할만큼 매우 중요한 요소이다. 

 

따라서 SPA의 SEO에 취약하다는 단점이 문제가 될 수 있다. 이를 극복하기 위해 SPA에서 SSR을 하기 위해서 Next.js, Nuxt.js등이 등장했다.

 

 

결론

SPA와 MPA는 장단점이 명확하고, 사용자의 사용 목적과 필요에 따라 사용하는 것이 중요하다. 빠르고 앱과같이 사용자 친화적인 UX의 어플리케이션을 원한다면 SPA가, SEO가 중요하고 각 페이지간의 전환과 대용량의 데이터를 다룬다면 MPA가 적합할 것이다. 

 

 

참고

https://www.hestabit.com/blog/single-page-vs-multi-page-web-apps/