SPA와 MPA
목차
- SPA
- MPA
- SPA와 MPA의 비교
1. SPA(Single Page Application)
: 한 개의 페이지(HTML)로 이루어진 애플리케이션
- CSR(Client Side Rendering) 방식으로 렌더링(SSR로 돠어야하는 상황도 존재함)
이미지 출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA
1. 사용하는 이유
: 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생(= 트래픽 과부화, 서버 과부화)
2. SPA 동작과정
- SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드
- 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신(기존 페이지의 내부를 수정해서 보여주는 방식)
- 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용
3. SPA 장점
- 뛰어난 반응성
- 반응형 다자인으로 인해 모바일 앱이나 데스크탑 앱을 사용하는 느낌
- 페이지상에서 무언가를 클릭 했을시 기다림 없이 즉각적인 반응
- 프론트와 백엔드의 분리
- 백앤드부분에 관해서 걱정할 필요가 없으며 서버사이드 코드를 작성할 필요가 없음
- 모바일 친화적
- 모바일 앱도 SPA와 동일한 아키텍처에서 개발되므로 모바일 개발을 염두해두면 동일한 백엔드 코드를 재사용하도록 할 수 있음
- 로컬 스토리지 캐시
- 애플리케이션은 하나의 요청만 보내고 모든 데이터를 저장한 다음 이 데이터를 사용할 수 있으며 오프라인에서도 작동함
4. SPA 단점
- SEO
- MPA보단 SEO 에 대한 노출이 어려움
- 비동기로 렌더링 되는 페이지로 인해 크롤러가 웹페이지의 내용을 크롤링 하기가 어려워짐
- javascript 필수
- JavaScript를 알지 못한다면 SPA를 구현할 수 없음
- 초기 구동 속도
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느림
2. MPA(Multiple Page Application)
: 여러개의 페이지(HTML)로 이루어진 애플리케이션
- 전통적인 웹 앱 개발 방법
- SSR(Server Side Application)방식으로 렌더링
이미지 출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA
1. MPA 동작과정
- 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드
- 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링
2. MPA 장점
- SEO 친화적
- 여러 페이지를 생성할 수 있기 때문에 훨씬 더 많은 수의 키워드를 타겟팅
- 많은 페이지로 인해 여러 HTML 파일이 존재하는데, HTML 다운로드하여 페이지를 크롤링하기 때문에 검색 엔진이 작동하는 방식에 더 적합
- 확장성
- 다중 페이지로 원하는 만큼 페이지를 추가 가능
3. MPA 단점
- 페이지 이동 시 느린 속도
- 사용자가 새로운 페이지를 이동하면 전체 페이지를 다시 렌더링하기 때문(리소스의 렌더링이 새로됨)
- 복잡한 개발
- 개발자는 클라이언트 측과 서버 측 모두에 프레임워크를 사용해야 함
- 개발시간이 길어짐
- 보안 및 유지보수
- 개발자는 모든 페이지가 안전한지 확인 해야하는데 페이지가 많아서 지속적으로 유지보수 하는 것이 어려움
3. SPA와 MPA 비교
이미지 출처 : https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA
| 특징 | SPA | MPA |
|---|---|---|
| 반응성 | 즉각적인 반응 | 페이지 전체 재로딩 |
| 초기 구동 속도 | 상대적으로 느림 | - |
| 개발성 | 개발 간소화 | 복잡한 개발 |
| SEO | 노출이 어려움 | 관리가 용이함 |
출처