SPA, MPA

SPA(Single Page Application)

한개의 페이지로 구성된 어플리케이션

 

MPA(Multi Page Application)

여러개의 페이지로 구성된 어플리케이션

 

---

MPA vs SPA

MPA
새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링한다.
인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다.

SPA
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 한다.
그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.
어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐이다.

그래서 SPA를 CSR(Client Side Rendering) 방식으로, MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말함

---

SPA의 장점, 단점

 

장점

• 좋은 사용자 경험
  1) 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다(웹사이트의 성능과 직결된다)
  2) 전체 페이지를 업로드하면서 발생하는 '깜빡'거림이 없다.
  3) 페이지의 일부만 바뀌는 것이기 때문에 application의 반응이 빠르다.
• 개발하기에 더 간단하다.
  1) 서버의 사용없이도 개발을 시작할 수 있다.
  2) 크롬으로 디버깅하기 쉽다.
• 로컬 데이터를 효과적으로 *캐시(cache) 할 수 있다.
  1) SPA의 Application은 서버에게 정적리소스를 한번만 요청한다.
      그리고 받은 데이터는 전부 저장해놓는다. 이 데이터는 오프라인에서도 사용 가능하다.
      (*cache란 데이터나 값을 미리 복사해놓는 임시 장소를 가리킨다.
      캐시에 데이터를 미리 복사해 놓으면 계산이나 별도의 접근 시간없이 더 빠른 속도로 데이터에 접근할 수 있다.)

 

단점

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

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

 

MPA의 장점, 단점

 

장점

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

 

단점

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

 

무엇을 더 많이 사용할까??

SPA, MPA 둘 중 무엇을 사용해야 할지는 정해진 바는 없다.

 

현재 개발중인 프로젝트의 상황을 파악한 후 SPA, MPA의 장단점을 고려하여 정하면 된다

---

출처

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