SPA ( Single Page Application )
싱글 페이지 애플리케이션 ( SPA ) 는 새로운 페이지를 불러오지 않고 같은 페이지에 동적으로 요소들을 다시 작성하는 페이지를 의미한다. React, Vue, Angular 셋 다 SPA 에 속하는 프레임 워크이다.
보통 클라이언트 사이드 랜더링이다
SPA 특징
- 단일 페이지이기 때문에, 모든 정적 리소스를 최초 접근시 단 한번만 다운로드 한다.
- 미리 다운 받아놓기 때문에 새로고침 없이 리렌더링 하지 않고 변경되는 부분만 갱신한다.
- 네이티브 앱과 비슷한 UX를 준다
SPA 장점
- 자연스러운 사용자 경험 ( UX )
- 전체 페이지를 업데이트 하지 않기 때문에, 빠르고 깜빡거림이 없다.
- 필요한 리소스만 부분적 로딩
- SPA 의 Application 은 정적 리소스를 한번만 요청한다.
- 서버의 템플릿 연산을 클라이언트로 분산한다 ( 성능 )
- 모바일 앱 개발을 염두에 둔다면 동일한 API 를 사용하도록 설계 가능
SPA 단점
- 초기 구동 속도가 느리다 ( 처음 접속시, 모든 리소스를 한번에 다 받음 )
- 보안 이슈 ( CSR 방식에서는
- 검색 엔진 최적화가 어려움 ( 페이지가 로딩되지 않으면 리소스가 보이지 않으므로, 검색에 노출이 안됨 )
MPA ( Multi Page Application )
멀티 페이지 애플리케이션 ( MPA ) 는 각 웹페이지 화면마다 정적 파일 html 로 보여주는 애플리케이션
클라이언트가 서버에 페이지를 요청하면 클라이언트에게 HTML 만 넘겨줌
보통 서버사이드 렌더링이다.
MPA 특징
- 여러 개(Single)의 Page로 구성된 Application이다.
- 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
MPA 장점
- 첫 로딩이 매우 빠르다.
- SEO 관점에서 유리하다.
- 이미 완성된 형태의 HTML 파일을 서버로 부터 전달받기 때문에
MPA 단점
- 매 페이지마다 새로운 요청이 발생하기 때문에 깜빡임 발생함
- 페이지 이동시 불필요한 템플릿도 중복해서 로딩한다
- 모바일 앱 개발시 추가적인 백엔드 작업 필요
SPA vs MPA
- 웹 페이지 내용이 동적으로 변하면 SPA, 페이지마다 모두 문서로 작성되어 있다면 MPA
- SPA 는 서버로부터 변경된 정보만 받지만, MPA 는 한 페이지 데이터를 전부 다 받아야함
Reference