SPA(Single Page Application) vs MPA(Multi Page Application)

SPA(Single Page Application) 

인터렉션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 웹페이지 구성방식

- 한개의 페이지로 구성된 웹 Application

- SPA는 CSR(Client Side Rendering) 방식으로 렌더링

- 단 한번만 리소스(HTML, CSS, Javascript)를 로딩하고 데이터를 받아올때만 서버와 통신

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

- 최초 페이지를 로딩한 시점부터 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 렌더링해줌

- 필요한 부분만 렌더링 해주기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 UX 제공Angular, React, Vue 등 프론트엔드 기술들이 나오면서 유행

 

# SPA의 장점

-앱처럼 자연스러운 사용자 경험

-필요한 리소스만 부분적으로 로딩하기 때문에 트래픽 감소, 렌더링에서 좋은 효율

-모듈화 또는 컴포넌트별 개발 용이

 

# SPA의 단점

-웹 애플리케이션에 필요한 정적 리소스를 한번에 당누로드 하기 때문에 초기 구동속도 느림

-spa구조 상 데이터 처리를 클라이언트에서 하는데, 해당 로직들이 Javascript를 통해 구현되므로 외부에 노출되는 보안문제

-CSR 방식으로 만든 SPA 앱은 검색엔진최적화(SEO)가 어렵다

└<div id="root"></div> 밖에 없기 때문에 검색엔진이 색인을 할만한 컨텐츠가 존재하지 않기 때문이다

└검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 어플리케이션이 로드 되기 전의 빈 상태의 코드를 크롤링 하기 때문에 인덱 싱이 제대로 이루어지지 않음

 

---

 MPA(Multi Page Application)

인터렉션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 웹페이지 구성방식

- 여러개의 Page로 구성된 Application

- MPA는 SSR(Server Side Rendering) 방식으로 렌더링한다

- 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다

- 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다

 

# MPA의 장점

-SEO(검색엔진최적화) 관점에서 유리하다

└MPA는 완성된 형태의 HTML을 서버로 부터 받기 때문에 검색엔진이 페이지를 크롤링하기 적합

-첫 로딩이 매우 짧다

└서버에서 이미 렌더링해서 가져오기 때문

└클라이언트가 JavaScript 파일을 모두 당누로드 하고 적용하기 전까지는 각각의 기능은 동작하지 않음

 

# MPA의 단점

- 새로운 페이지 이동할 때 깜빡거림(SPA에 비해 UX안좋음)

└매 페이지마다 리로딩발생 매번 렌더링함

-페이지 이동시 불필요한 템플릿도 중복해서 로딩해서 성능저하

-모바일 앱 개발시 추가적인 백엔드 작업 필요 생산성안좋음

 

출처

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/