MPA, SPA 차이, 장단점

MPA

Multi Page Application의 약자(여러 페이지로 구성된 웹 어플리케이션)

 

사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을

받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다.

 

 

SPA

Single Page Application의 약자(하나의 페이지로 구성된 웹 어플리케이션)

 

브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.

 

 

 

 

 

장단점

 

1) SPA의 장점

• UX
  • 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다!
    (웹사이트의 성능과 직결된다.)
  • 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다.
  • 페이지의 일부만 바뀌는 것이기 때문에 application의 반응이 빠르다.
• 개발하기에 더 심플하다.
  • 서버의 사용없이도 개발을 시작할 수 있다.
  • 크롬으로 디버깅하기 쉽다.
• 로컬 데이터를 효과적으로 캐시(cache)* 할 수 있다.
  • SPA의 Appication은 서버에게 정적리소스를 한번만 요청한다.
    그리고 받은 데이터는 전부 저장해놓는다.
    이 데이터는 오프라인에서도 사용 가능하다.

(참고) 캐시(cache)란 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.
캐시에 데이터를 미리 복사해 놓으면 계산이나 별도의 접근 시간 없이
더 빠른 속도로 데이터에 접근할 수 있다.

2) MPA의 장점

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

(참고) SEO는 홈페이지 혹은 콘텐츠를 검색 결과의 상단에 위치시키는 작업이다.
검색 엔진은 '크롤링(Crawling, 웹 크롤러로 웹사이트 관련 데이터를 가져오는 과정)'과
'인덱싱(Indexing, 크롤링을 통해 얻은 정보를 검색 색인에 저장하는 과정)'을 통해
정보를 카테고리화 한다.

3. 단점 👎

1) SPA의 단점

• 초기 구동 속도가 느리다.
  • 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문!
• SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에 불리하다.*

당연하다. 페이지가 하나이니 검색에 걸리지 않는다.

2) MPA의 단점

• 새로운 페이지를 이동하면 화면이 깜빡인다.
  • 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문이다.
• 프론트엔드와 백엔드가 밀접하게 연관되어있다. (Tightly coupled!)
  • 프론트엔드와 백엔드가 서로 연관이 높아 개발이 복잡해질 수 있다.

 

 

 

REFERENCE https://velog.io/@thms200/SPA-vs.-MPA

SPA vs. MPA