SPA 방식과 MPA 방식

SPA란?

👉 Single Page Application!

=> 서버에서 주는 html이 1개뿐인 애플리케이션.

=> SPA는 주로 CSR(클라이언트 사이드 렌더링) 방식으로 렌더링한다.

=> SPA는 딱 한 번만 정적 자원을 받아 온다. 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신한다.

=> React, Angular, Vue 등 프론트엔드 기술이 등장하며 크게 유행하고 있다.

 

SPA 장점: 사용성 굳. 깜박거림 없음->자연스러운 사용자 경험(UX), 필요한 리소스만 부분 로딩, 컴포넌트별 개발 용이, 모바일 앱 개발한다면 동일한 API 사용하도록 설계 가능

SPA 단점: 초기 구동 속도 느림, SEO(검색 엔진 최적화) 어려움, 보안 이슈

→ 단점: SPA는 딱 한 번 정적 자원을 내려받다 보니, 처음에 모든 컴포넌트를 받아옵니다. 즉, 사용자가 안 들어가 볼 페이지까지 전부 가지고 온다. 게다가 한 번에 전부 가지고 오니까 아주아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려집니다.

++ 왜 굳이 html을 하나만 줄까?

→ 많은 이유가 있지만, 그중 제일 중요한 건 사용성 때문.

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이라. (사용자가 회원 가입하다가 적었던 내용이 날아갈 수도 있고, 블로그 같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글뿐인데 헤더와 카테고리까지 전부 다시 불러와야 합니다.)

---

MPA란?

👉 Multi Page Application!

=> 여러 개(single)의 페이지로 구성된 애플리케이션.

=> MPA는 SSR(서버 사이드 렌더링) 방식으로 렌더링한다.

=> 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 자원(HTML, CSS, JavaScript)이 다운로드된다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

 

MPA 장점 : SEO에 유리, 첫 로딩 시간 짧음

MPA 단점 : 매 페이지마다 리로딩(새로고침) 발생-> 깜빡임, 서버 렌더링에 따른 부하, 페이지 이동 시 불필요한 템플릿도 중복 로딩, 모바일 앱 개발 시 추가적인 백엔드 작업 필요

 

---

렌더링 방식 비교 

SSR vs CSR 

렌더링이란 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것인데, 크게 두 가지 방식이 있다. 서버 사이드 렌더링(SSR, Server Side Rendering)과 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이다. 

 

SSR은 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 방식이고, CSR은 웹 페이지의 렌더링이 클라이언트 쪽에서 일어나는 것으로 브라우저는 최초 요청에서 html, Javascript, CSS 확장자의 파일을 차례로 다운로드한다.  즉, 첫 페이지의 렌더링을 SSR은 서버 측에서, CSR은 클라이언트 측에서 처리한다.

 

CSR과 비교하면, SSR은 첫 화면이 보임과 동시에 동적 기능 사용이 가능하다는 장점이 있다(CSR은 단계별로 가져와서 클릭해도 작동이 안 될 수 있다). 또한, 클라이언트가 서버로부터 소스 코드를 받을 수 있기 때문에 검색에도 유용하다는 장점이 있다. 이 검색 엔진 최적화(SEO, Search Engine Optimization)’ 장점은 구글, 네이버 등의 검색 엔진에 쉽게 노출시킬 수 있게 한다. 

 

(참고)

https://ctdlog.tistory.com/46

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/