SPA / MPA 정의
SPA(Single Page Application)는 한 개의 페이지로 구성된 애플리케이션이고
MPA(Multi Page Application)는 여러 개의 페이지로 구성된 애플리케이션입니다.
SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드하고 새로운 페이지 요청이 있을 경우 전체 페이지를 다시 렌더링 하지 않고 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신합니다.
페이지를 구성하는 콘텐츠가 AJAX를 통해 로드되기 때문인데 AJAX는 페이지를 리프레시 하지 않고 데이터를 교환하거나 업데이트하는 방식입니다. 즉 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공합니다.
MPA는 전통적인 웹 애플리케이션 개발 방식인데 새로운 페이지를 요청할 때마다 정적 리소스를 다운로드하고 그에 맞춰 전체 페이지를 다시 렌더링 합니다.
새로운 페이지 요청이 있을 경우 페이지를 구성하기 위한 리소스를 전부 다시 다운받기 때문에 웹사이트를 사용하는 유저에게 좋은 사용자 경험을 제공하지 않습니다. 페이지 이동 시 데이터가 많을 경우 화면에 그려지는 동안 사용자는 그저 빈 화면을 바라보게 됩니다. 이는 웹사이트를 이용하면서 한번쯤 경험해봤을 흰 화면이 깜빡이는 현상입니다.
장단점
SPA 장점
- 모든 정적 리소스들을 최초 한 번만 다운로드하고 그 후 페이지 이동 시에는 갱신에 필요한 데이터만 전달받아 갱신하기 때문에 빠르다.
- 별도의 서버 사용 없이도 개발을 시작할 수 있다. 페이지를 구성하는 작업을 모두 프론트엔드에서 하기 때문에 서버 없이 개발이 가능하다.
- 로컬 데이터를 효율적으로 캐싱 할 수 있다.
SPA는 서버에서 정적 리소스를 한 번만 요청하고 받은 데이터들을 전부 저장해놓는다. 그리고 이 데이터는 오프라인에서도 사용이 가능하다.
SPA 단점
- 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한 번에 다운로드하기 때문에 초기 구동 속도가 느리다.
- 콘텐츠가 AJAX를 통해 로드되기 때문에 검색엔진최적화(SEO)가 어렵다.
- 자바스크립트 기반으로 실행되기 때문에 보안성 측면에서 좋지 않다.
MPA 장점
- 검색엔진최적화(SEO) 관리에 적절하며 하나의 애플리케이션은 페이지당 하나의 키워드에 대해 최적화될 수 있기 때문에 다른 키워드들을 올릴 수 있는 기회를 제공한다.
- 새로운 페이지를 요청할 때마다 해당 페이지에 필요한 정적 리소스만 다운로드하기 때문에 초기 구동 속도가 빠르다.
MPA 단점
- 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문에 좋은 사용자 경험을 제공하지 않는다.
- 프론트엔드와 백엔드가 서로 연관이 높아 개발이 복잡해질 수 있다.
언제 사용해야할까?
SPA, MPA 둘 중 뭐가 더 좋다는 것은 없지만 웹 애플리케이션을 만드는 목적과 방향성 등 경우에 따라 다르기 때문에
각기 장단점에 대해 생각해 보고 결정하는 편이 좋습니다.
참고 자료
