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

SPA 란?

제목에 적은 대로, Single Page Application의 약자이다. 단일 페이지로 만들어진 어플리케이션을 뜻한다. 즉, 하나의 HTML 파일을 가지고 자바스크립트를 통해 동적으로 화면을 구상하는것을 의미한다. SPA는 웹 사이트의 규모가 커지면서 웹 페이지에 들어간 자원의 양도 많아지고 이를 매번 전부 로딩하는것이 비효율적이기에 등장하게 되었다.

SPA 형식은 서버가 최초 실행시 HTML 파일 등의 정적인 자원을 클라이언트에 보내주고, 이후 데이터가 갱신되어야 할 부분들만 JSON을 통해 해당 부분만 갱신한다. 최초에 다운로드한 정적 리소스는 변경되지 않고 변경되는 부분만을 렌더링함으로서 효율적인 렌더링과 트래픽 감소등의 장점을 가질 수 있는 것이다.

 

그렇다면 MPA 란?

MPA (Multiple Page Application)는 Multiple, 여러개의 단일 페이지로 이루어진 어플리케이션이다. jsp, php 등의 웹 서버 언어로 구축된 사이트에서 자주 보이며 브라우저에서 요청할때마다 정적인 자원을 다 다운로드 하고 전부 렌더링하여 보여주며, 보여줄때마다 새로고침이 발생하게 된다. 그렇기 때문에 불필요한 리소스도 계속해서 중복 로딩을 하는 만큼 효율적이지 못한 부분이 존재한다. 그러나 MPA경우는 SEO(Search Engine Optimization, 검색 엔진 최적화) 에 친화적이다. SPA의 경우 검색엔진에서 검색하고 찾아낼 컨텐츠가 비어있을 수 있기 때문이다.

 

마무리

SPA의 장점	SPA의 단점
페이지를 갱신할 필요가 없으므로 사용자 입장에서 자연스러움	정적 리소스를 초반에 전부 다운하는 만큼 초기 구동속도가 느림
필요한 리소스만을 갱신함으로서 효율적인 렌더링, 트래픽 감소 등 성능면의 이점을 얻을 수 있음.	SEO에 상대적으로 취약함. (SSR을 통해 해결할 수 있다 하지만 상대적으로 취약하다)
모듈화 혹은 컴포넌트 별 개발에 용이함	데이터 처리를 클라이언트에서 하는 경우 보안문제가 있을 수 있음.

MPA의 장점	MPA의 단점
SEO에 친화적이다. 서버에서 HTML파일을 렌더링해서 전달받는 만큼 페이지를 크롤링하기 편함.	페이지 이동시 전체 렌더링 하기 때문에 새로고침 발생해 사용자가 화면 렌더링 전까지 대기해야함
첫 로딩이 빠름	페이지 이동시 불필요한 자원도 계속 가져오기 때문에 성능상 좋지 않음

 

위와 같이 SPA와 MPA의 장단점을 간단하게 정리할 수 있지만, SPA만이 좋은 개발이고 MPA는 구식이나 나쁜 개발이라고 할 수는 없다. 기본적으로 SPA는 앱 친화적이며, MPA는 검색엔진 등에 유리하다고 할 수 있는 만큼 어떤 사이트를 개발할지 생각하고 방식을 정하는 것이 맞다고 생각한다.