MPA (Multiple Page Application)
- 웹 앱을 개발하는 전통적인 방법
작동 방식
- SSR 방식으로 렌더링한다.
장점
- SEO 친화적
여러 페이지를 생성할 수 있기 때문에 훨신 더 많은 키워드를 타겟팅할 수 있다.
또한 유기적 트래픽의 양이 자동으로 향상된다.
크롤링을 하는 검색 엔진이 작동하는 방식에 더 적합하다. - 확장성
다중 페이지로 원하는 만큼 페이지를 추가할 수 있다.
단점
- 페이지 이동 시 느린 속도
SPA와 반대로 새로운 페이지를 이동할때 전체 페이지를 다시 렌더링 하게된다. - 복잡한 개발
클라이언트 측과 서버 측 모두 프레임워크를 사용해야되서 개발 시간이 더 길어진다. - 보안 및 유지보수
모든 페이지를 확인해야 하기 때문에 유지보수가 더 어렵다.
예시
- Amazon
SPA (Single Page Application)
- 모던 웹의 패러다임
- 서버로 부터 완전히 새로운 페이지가 아닌 현재의 페이지를 동적으로 다시 작성함으로써
사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말함. - SPA의 핵심 가치는 사용자 경험(UX)향상에 있으며 부가적으로 애플리케이션의 속도 향상도 기대가능.
작동 방식
- CSR 방식으로 렌더링한다
장점
- 속도 및 응답시간
속도는 전반적인 사용자 경험을 향상시키는 데 중요한 요소이다.
전체 페이지를 다시 렌더링 하는게 아닌 변경되는 부분만 갱신하기때문에 새로고침이 발생하지 않아
네이티브 앱과 유사한 사용자 경험을 제공 가능하다. - 모바일 친화적
모바일 앱들도 SPA와 동일한 아키텍처에서 개발되므로 모바일 개발을 염두한다면 동일한
백엔드 코드를 재사용 할 수 있다. - 개발 간소화
서버에서 페이지를 렌더링하기 위해 코드를 작성할 필요 없다. - 로컬 스토리지 캐시
모든 로컬 스토리지를 효과적으로 캐시할 수 있다.
애플리케이션은 하나의 요청만 보내고 모든 데이터를 저장한 다음 이 데이터를 사용 가능하며, 오프라인에서 도 작동한다.
단점
- 초기 구종속도
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 다운로드 하기 때문에
초기에 다운 받아야 할 데이터가 많아서 초기 구동속도가 상대적으로 느린편이다. - SEO(검색엔진 최적화) 이슈
SPA는 JavaScript로 구축되는데 JavaScript를 읽지 못하는 검색엔진에 대해서 크롤링이 되지않아
색인이 되지 않는 문제가 발생할 수 있다. - 보완 문제
XSS(교차 사이트 스크립팅)로 인해 다른 사용자가 웹 응용 프로그램에 클라이언트 측 스크립트를 삽입 할 수 있는 위험이 있다.
예시
- Gmail
- Google 지도
- GitHub
- Facebook
등등 많이 사용되고있다
결론
SPA와 MPA는 서로 다른 종류의 최적화된 사용자 경험을 제공한다. 사용자 경험 측면에서 MPA와 SPA는 모두 훌륭하며 앱을 만들기 위해 염두에 두고 있는 목표를 기반으로 하는 이 차이는 주관적이다.
각각 장단점이 있기에 상황에 맞추어 쓰면 되겠다.
참고 자료
https://web.dev/learn/pwa/architecture/
https://web.dev/rendering-on-the-web/
https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
https://poiemaweb.com/js-spa
https://www.tekrevol.com/blogs/spa-vs-mpa/
https://www.hestabit.com/blog/single-page-vs-multi-page-web-apps/
