SPA 와 MPA

[EUNJIHA]

SPA(Single Page Application) vs MPA(Multi Page Application)

들어가기 전에

채용 사이트에서 다음과 같은 자격조건을 봤다.

웹 프론트엔드 개발자 (Github 계정 제출 권장)

• SPA(React, Vue.js, Angular) 개발 경험이 있는 분

마침 server 반에서 SPA MPA(혹은 CSR, SSR)에 대해서 들어보기도 했고, 이번 기회에 정리해보고 싶어서 작성한다.

SPA

• 설명: 페이지는 한 번만 로드하고, 나중에 필요한 부분만 따로 불러오는 방식
• 장점: Client와 Server 간의 결합도가 낮다. 명확하게 분리할 수 있다.
• 단점: 검색엔진 최적화가 매우 어렵다. 컨텐츠가 AJAX를 통해 로드되기 때문이다. 즉 데이터가 포함된 페이지가 한 꺼번에 오는 것이 아니기 때문에 크롤링 하기 어렵다. React, Angular, Vue등

MPA

• 설명: 전통적인 방식이다. 페이지를 이동할 때마다 서버에 새로운 페이지를 요청한다.
• 장점: 검색엔진 최적화에 적합하다.
• 단점: Client와 Server 간의 결합도가 높다. 서버 렌더링에 따른 부하. 불필요한 탬플릿도 중복해서 로딩

어떤 것을 사용할 것인가?

만들 application의 목적에 따라서 다르다. 만들 application이 더 집중해야 하는 것이 무엇인지 살피자. SPA, MPA의 각각 장단점도 알아두자. 어느 것이든 trade-off가 있기 마련이다.

참고

SPA vs MPA SPA와 SSR