이번 포스트는 SPA와 MPA에 대해서 작성해보려고 한다. 각각 무엇인지 그리고 어떤 장단점이 있는지 한번 알아보자

1. MPA

• MPA(Multi Page Application)는 여러 개의 페이지로 구성된 애플리케이션을 의미한다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링한다. 이 때 화면이 깜빡거리게 되는 것이 큰 특징이다.

• 장점

  1. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다.
     MPA는 완성된 형태의 HTML파일을 서버로부터 전달받는다.
     따라서 검색 엔진이 페이지를 크롤링하기에 적합하다.

  2. 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩 매우 짧다.

• 단점

  1. 매 페이지 요청마다 새로고침이 발생하며 화면 깜빡임이 있다.
     새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.
  2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩함으로 성능 측면에서 좋지 못하다.

2. SPA

• SPA(Single Page Application)는 한 개의 페이지로 구성된 애플리케이션을 의미한다. SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드하며 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

• 장점

  1. 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 깜빡임이 없다. 따라서 자 연스러운 사용자 경험을 줄 수 있다.

  2. 전체가 아닌 필요한 리소스만 부분적으로 다시 렌더링 하기 때문에 성능적인 측면 에서 좋다.

  3. 컴포넌트별 개발이 용이하기 때문에 유지보수 측면에서 유리하다.

• 단점

  1. 모든 정적 리소스를 최초 한 번에 다운로드 받기 때문에 초기 구동 속도가 느리 다.
  2. SEO(Search Engine Optimization, 검색 엔진 최적화)가 어렵다.

마치며

이번 포스트에서는 SPA와 MPA에 대해서 알아보았다. 프로젝트의 성격에 맞게 SPA와 MPA 중 어떤 것을 사용할지 각자의 장단점을 고려하여 정하면 될 것 같다.
그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧