SPA와 MPA

내가 기억하기 위한 개념 정리

내 기준 중요한 장단점까지만 기술한다

 

출처 : https://lvivity.com/single-page-app-vs-multi-page-app

MPA란?

- Multiple Page Application

- Server Side Rendering 방식으로 렌더링

- 새로운 페이지를 요청할때마다 정적 리소스까지 함께 다시 렌더링

- 장점 : *SEO 친화적임. 변경된 데이터 항목까지 모두 확인 가능

- 단점 : 데이터 변경 시 다시 렌더링 해야하므로 속도 느리고 사용자 경험 떨어짐

 

SPA란?

- Single Page Apllication

- Client Side Rendering 방식으로 렌더링

- 단일 페이지로 구성된 웹 어플리케이션.

- 정적 리소스는 최초 한번에 다운로드

- 화면 이동 시 새로고침 없이 필요한 데이터만 json형태로 전달받아 동적으로 렌더링

- 장점 : 빠른속도, 캐싱

- 단점 : SEO에 굉장히 취약, 색인할 만한 컨텐츠가 존재하지 않음

 

*Vue, React등이 처음에 CSR방식으로 시작했다가, 초기 렌더링 시간 문제, SEO문제, 메타 데이터 동적 생성의 한계를 극복하기 위해 SSR프레임 워크 보유

 

*SEO?

- Search Engine Optimization. 검색엔진 최적화

- 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정

- SEO 수행을 위해선 웹크롤러를 사용

- SSR(서버사이드 렌더링)을 하는 MPA의 경우 javascript 동작 전에 완성된 형태의 템플릿(데이터가 들어가있는 HTML)을 서버로부터 전달받기에 크롤링에 매우 적합 (근데 Nuxt.js나 Next.js는 SPA지만 SSR 지원함 => 결론. SPA그냥쓰면된다~