MPA와 SPA란?

23번째로 포스팅하게 될 내용은 MPA와 SPA에 관한 내용입니다.

[ MPA ]

• Multi Page Application 다중 페이지 응용프로그램
• MPA는 전통적인 웹 애플리케이션 개발 방식
•  jsp, 혹은 php 등과 같은 웹 서버 언어로 구축된 웹사이트에서 많이 보인다
• SSR 방식으로 렌더링함

 

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

 

 

[ MPA 장점 ]

1. SEO 관점에서 유리
   • MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받음
     따라서 검색엔진이 페이지를 크롤링하기에 적합함
2. 첫 로딩 매우 짧음
   • 서버에서 이미 렌더링해 가져오기 때문이다.
   • 그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않음

 

[ MPA 단점 ]

1. 새로운 페이지를 이동하면 ‘깜빡’임 (UX)
   • 매 페이지 요청마다 리로딩(새로고침) 발생
     새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문
2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩
3. 서버 렌더링에 따른 부하
4. 모바일 앱 개발시 추가적인 백엔드 작업 필요 개발이 복잡해질 수 있음

 

[ MPA Lifecycle ]

 

 

 

[ SPA ]

• Single Page Application 단일 페이지 응용프로그램
• 어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트 될 뿐임
• Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행
• CSR방식으로 렌더링함

 

SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.
그 이후 새로운 페이지 요청이 있을 경우,
페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다

 

 

[ SPA 장점 ]

1. 자연스러운 사용자 경험 (UX)
   • 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없음
2. 필요한 리소스만 부분적으로 로딩 (성능)
   • SPA의 Application은 서버에게 정적리소스를 한 번만 요청
   • 그리고 받은 데이터는 전부 저장해놓음(캐시)
3. 서버의 템플릿 연산을 클라이언트로 분산
4. 컴포넌트별 개발 용이
5. 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능

 

[ SPA 단점 ]

1. JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느림
   • Webpack의 code splitting으로 해결 가능
2. 검색엔진최적화(SEO)가 어려움
   •  SSR로 해결 가능
3. 보안 문제 (프론트엔드에 비즈니스 로직 최소화)
   • SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음

 

[ SPA Lifecycle ]

 

 

[ 검색엔진 최적화(SEO) ]

검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말함

기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것