[개발상식] SPA,MPA 개념과 장단점

(왼)출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA

MPA(Multiple Page Application)

• MPA : (Multiple Page Application) 여러 개의 페이지로 구성된 애플리케이션 
• 웹을 개발하는 전통적인 방법 
• 요청이 들어올 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것 , 각 페이지마다 각 HTML 파일을 가짐 
• 페이지 이동 or 새로고침 시 전체 페이지를 다시 렌더링 
• 즉, 요청이 있을 때마다 페이지를 리로드함 
• MPA는 SSR(Server Side Rendering) 방식으로 렌더링

MPA 장점 

1. SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에서 유리 

 

MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링하는 데 유리함

여러 페이지로 구성되어 있기 때문에 각각 키워드에 맞춰 웹사이트의 정보 콘텐츠를 구조화하고, 이를 사용자가 키워드로 검색하면 입력한 키워드에 부합되는 정보 순서대로 노출됨.

SEO(Search Engine Optimization, 검색 엔진 최적화)
웹 콘텐츠를 검색 상단에 노출하고, 유입 트래픽을 개선하기 위해 웹 콘텐츠를 재구성하는 작업 

 

2. 초기 로딩 속도가 빠름 

 

서버에서 이미 랜더링해 가져오기 때문임

MPA 단점 

1. 페이지 이동 시 느린 속도와 새로고침 

요청이 들어올 때마다 전체 페이지를 리로드하기 때문에 새로고침이 발생함 

새로고침으로 인해 스크롤 위치, 포커스, 깜박임 등으로 인해 유저 경험에 좋지 않음 

HTML,CSS,JS 등의 리소스들이 새로 고쳐져 속도에 영향을 받음 

 

2. 복잡한 개발

개발자가 클라이언트와 서버 측 모두에 프레임워크를 사용해야 함 

 

3. 보안 및 유지보수 

많은 페이지 수로 인해 지속적으로 유지보수하는 것이 어려움 

 

 

MPA에서 사용되는 라이브러리/프레임워크

Django, Ruby on Rails, jQuery 

---

SPA (Single Page Application)

• SPA : 단일 페이지 애플리케이션(Single Page Application)
• 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 
• 서버에서 필요한 데이터만 비동기로 받아와 동적으로 현재 화면에 다시 렌더링 하는 방식 
• 쉽게 말해, 하나의 페이지만 존재하는 웹사이트로, HTML 파일 하나에서 JS나 CSS 등 리소스 파이들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 것 
• CSR(Client Side Rendering) 방식으로 렌더링

 

SPA 장점 

1. 자연스러운 사용자 경험과 빠른 속도 

전체 페이지를 리로드하는 것이 아닌 필요한 부분만 갱신하기 때문에 새로고침이 발생하지 않음 

 

2. 더 적은 서버 리소스 사용 

페이지를 최초 로드할 때 서버에게 모든 정적리소스를 한 번만 요청하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 전달받기 때문에 전체적인 트래픽 감소

 

SPA 단점 

1. 최초 로딩 시간이 느림 

처음 접속 시, 유저에게 필요하지 않을 수도 있는 모든 리소스를 한 번에 다 받기 때문 

 

2. SEO가 어려움

페이지가 로딩되어야 리소스가 보이기 때문에 검색에 노출이 안 됨 

또한 자바스크립트로 페이지를 구성하기 때문에 자바스크립트를 읽지 못하는 크롤러 봇은 페이지에 대한 정보를 읽을 수 없어 SEO에 취약함 

 

 

SPA에서 사용되는 라이브러리/프레임워크

React, Angular, Vue.js