SPA 와 MPA
SPA와 MPA의 개념들에 대해 다룰 페이지
SPA(Single Page Application)
어플리케이션을 구동하는데 필요한 페이지가 1개(Single Page)만 존재하는 어플리케이션을 의미한다. SPA어플리케이션들은 하나의 HTML페이지안에서 새로고침(refresh)없이 Component만 교체하여 변경된 내용을 즉각적으로 반영한다. 마치 모바일 앱(페이스북)처럼 작동하기 때문에 웹과 모바일앱을 동시에 개발해야하는 하이브리드 앱을 개발하고자 할 때 적절한 구현방식이 SPA이다.
또한 SPA는 서버와의 통신 없이 클라이언트측에서 응답화면을 만들기 때문에 서버와 통신하여 응답화면을 얻어 오는 방식의 어플리케이션과 비교하여 보다 빠르고 즉각적인 응답화면을 제공한다.
전문용어로 클라이언트측에서 응답화면을 찾는 과정을 CSR, 서버측에서 찾는과정을 SSR이라고 부른다.
MPA(Multi Page Application)
애플리케이션을 구동하는데 필요한 페이지가 여러개(Multi Page) 존재하는 어플리케이션을 의미한다. MPA어플리케이션들은 응답화면들을 URL별로 준비해두고 클라이언트가 요청할 때 마다 서버에서 URL에 맞는 응답화면전체를 동적으로 생성하여 만들어준다.
즉 매 요청마다 페이지 전체를 새로 생성하므로 새로고침(refresh)이 발생한다. 따라서 새로고침 없이 변경된 부분만찾아 업데이트하는 SPA방식에 비하여 렌더링 시간이 더 오래 걸린다.
그럼 MPA 왜 씀?
MPA어플리케이션도 나름의 장점이 있다. SPA도 장점만 존재하는건 아니고 단점이 존재하며, SPA의 단점을 보충해 줄 수 있는게 MPA이다.
즉 SPA의 단점을 MPA가 보완해 줄 수 있고, MAP의 단점을 SPA가 보완하는 것이다.
MPA 와 SPA 비교
아래 특징에서 단점은 빨간색, 장점은 파랑색으로 표기하도록 하겠다.
MPA
렌더링( 화면을 만드는 작업)이 Server측에서 이루어진다.(Server Side Rendering)
URL마다 응답해줘야할 페이지를 미리 지정해둔다.
매 요청시 응답화면을 새로 생성하여 반환 한다.즉 새로고침이 발생하며 응답시간이 길다.
URL마다 응답해줘야 할 페이지가 정해져 있기 때문에 검색엔진최적화(SEO)에 좋다.
응답화면에 넣어줄 데이터를 Server가 관리하기 때문에 보안이 강화된다.
SPA
렌더링이 Client측에서 이루어진다.(Client Side Rendering)
URL이 존재하긴 하지만 응답해줘야할 페이지는 애초에 1개 이다.
매 요청시마다 변경점만 교체한다. 즉 새로고침이 없고, 응답 반응이 즉각적으로 이루어진다.
URL마다 응답해줘야할 페이지가 1개뿐이므로 검색엔진최적화(SEO)에 나쁘다.
Component에 넣어줄 데이터를 Client측에서 관리하기 때문에 보안이 취약하다.
정리
SPA와 MPA 방식 모두 상대적으로 장점과 단점이 혼재 한다. 그럼 대체 어떤 방식으로 개발해야 하나?
별거없고 한 가지 방식으로만 개발하려는 생각을 고치면 된다.
만들고자 하는 어플리케이션이 SPA친화적 이라면 SPA로 , MPA친화적 이라면 MPA로 개발하면 될 뿐이고 두 방법을 섞어도 무방하다.
요즘에는 기술이 좋아서 SPA어플리케이션에 SSR기능을 끼워 넣는 다던지, 보안관련 기능을 추가한다던지가 다 가능해서 SPA와 MPA의 장점을 섞은 어플리케이션 개발이 가능하다.
따라서 어플리케이션이 SPA친화적이라면 SPA로시작, MPA친화적이라면 MPA방식으로 개발을 시작 한 후 단점들은 최신 기술에 맞춰서 보완해주면 된다.
Last updated