SPA(Single Page Application), MPA(Multi Page Application)

서론

 전통적인 Web Application의 Page life cycle은 MPA(Multi Page Application)였다.

쉽게 말하면 웹 브라우저에서 특정 페이지에 대한 요청을 서버로 보내면, 서버는 데이터를 웹 브라우저에 응답한다.

이때 페이지를 이동할 때마다 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 되는데,

사용자 입장에서는 답답한 경험을 제공할 수 도 있다.

(데이터가 많을 경우 페이지를 불러오는 동안 흰 화면을 보고 있어야 한다던가.. 여러 가지 부분에서)

 

 그래서 요즘은 SPA(Single Page Application) 방식으로 개발된 Web Application을 심심치 않게 볼 수 있을 것이다.

다른 페이지로 이동하지 않더라도 하나의 페이지에서 서버와 통신을 통해 사용자에게 좀 더 깔끔한(?) 경험을 제공한다.

물론 이 방식에도 단점은 있다. 하나하나 알아보도록 하자.

 

---

 

SPA(Single Page Application)

 한 개의 페이지(Single Page)로 구성된 Application.

페이지를 최초에 한 번만 로드하고, 그 이후부터 변화가 생기는 부분에서만 AJAX로 처리 한다.

AJAX를 사용하면 Web Application 페이지의 일부만 새로 고칠 수 있다.

 

 

장점

빠르고 부드러운 UX

 페이지를 처음에만 로드하고 그 이후 서버와 통신을 통해 필요한 데이터만 주고받는다.

이렇게 하면, 서버 - 클라이언트 트래픽이 줄어든다. Application이 빠르다고 느껴진다.

사용자 입장에서는 페이지를 지속적으로 새로고침 할 필요 없이 Application을 사용할 수 있으므로,

깔끔하고 부드럽게 느껴진다.

 

로컬 캐싱 및 오프라인 기능

 초기 요청 이후 서버로부터 받은 페이지 데이터를 로컬에 캐싱한다.

페이지를 최초에 한 번만 로드하기 때문에 네트워크 연결이 끊겨도 Application이 계속 동작할 수 있다.

이후 네트워크에 재연결이 된다면 로컬 데이터와 서버 데이터를 동기화하여 기능을 복원한다.

 

백엔드 / 프론트엔드 분리

 SPA에서 UI는 데이터와 분리된다. 

이를 통해 백엔드에 영향을 주지 않고 원하는 만큼 프론트엔드를 개편하고 UI를 변경할 수 있다.

(일부 정적 리소스 파일 제외)

 

 

단점

SEO 문제

 오랫동안 Google 및 기타 검색 엔진은 SPA 인덱싱에 문제가 있었다.

봇이 정적 HTML 페이지를 크롤링하는 데 능숙했지만 동적 콘텐츠를 렌더링 하는 데는 적합하지 않았기 때문이다.

이 문제는 SSR을 사용하면 어느 정도 해결이 된다.

 

느린 초기 로딩

 SPA는 기존 Application보다 느리게 시작된다. 그러나 첫 번째 렌더링 후 SPA는 MPA보다 훨씬 빨라진다.

---

 

MPA(Multi Page Application)

 여러 개의 페이지(Multi Page)로 구성된 Application.

지금 포스팅을 하고 있는 티스토리 게시글도 이동할 때마다 페이지를 새로고침 하고,

게시글마다 페이지가 다르니 MPA라고 할 수 있다.

간단한 Web Application이나 티스토리 같은 블로그는 MPA로 만드는 것도 오히려 장점이 있다고 생각한다.

 

MPA의 장단점은 SPA의 정반대라고 보면 된다.

 

---

참고

- https://www.mindk.com/blog/single-page-applications-the-definitive-guide/
- https://hanamon.kr/spa-mpa-ssr-csr-장단점-뜻정리