SPA vs MPA

이재홍·2022년 6월 27일
0

https://www.tekrevol.com/blogs/spa-vs-mpa/

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

SPA (Single Page Application)

  • Single(한개)의 Page로 구성된 Application
  • Wep Application에 필요한 모든 정적 리소스를 최초 한 번에 다운로드
  • SPA를 CSR (Client Side Rendering) 방식으로 렌더링
  • 단 한번만 리소스(HTML, CSS, JS)를 로딩

즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식

이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.

🔥 Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행 🔥

장점😊

  1. 자연스러운 UX (사용자 경험)
    : 전체 페이지를 업데이트 할 필요가 없음 (새로고침 X)

  2. 필요한 리소스만 부분적으로 로딩, 서버의 템플릿 연산을 클라이언트로 분산, 컴포넌트별 개발 용이 (성능, 생산성)

SPA의 Application은 서버에게 정적리소스를 한번만 요청, 받은 데이터는 전부 저장(캐시에 cache)

단점🤔

  1. JS 파일을 번들링해서 한 번에 받기 떄문에 초기 구동 속도가 느림 [🧚‍Webpack의 code splittting]

  2. 검색엔진최적화(SEO)가 어려움 [🧚‍SSR]

  3. 보안 이슈 [프론트엔드에 비즈니스 로직 최소화]

SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트 측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음

MPA (Multiple Page Application)

  • Multiple(여러 개)의 Page로 구성된 Application
  • MPA는 SSR (Server Side Application) 방식으로 렌더링 됨
  • 새로운 페이지를 요청할 때마다 서버에서 렌더링된 리소스(HTML, CSS, JS)가 다운로드됨
    페이지 이동하거나 새로고침하면 전체페이지 재렌더링

장점😊

  1. 검색 엔진 최적화에 유리함!
    : MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 읽기 좋음

  2. 첫 로딩 매우 짧
    : 서버에서 이미 렌더링해서 가져오기 때문에, 그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기 전까지는 기능이 적용되지 않음!

단점🤔

  1. 새로운 페이지를 이동하면 깜빡임 (UX)
    : 매 페이지 요청마다 새로고침 발생, 새로운 페이지를 요청할 때마다 전체 페이지를 재렌더링

  2. 페이지 이동 시 불필요한 템플릿도 중복해서 로딩됨, 서버렌더링에 따른 부하 (성능)

0개의 댓글