SPA & MPA

웹 어플리케이션 개발을 한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해서 SPA를 개발하게 됩니다.

*SPA란 Single Page Application의 약자로, 하나의 페이지로 구성된 웹 어플리케이션 입니다. 어플리케이션을 이용할 때 헤더는 고정되어있고, 메뉴를 선택하면 메인 화면 부분, 혹은 클릭한 부분만 바뀌는 그런 웹사이트들을 SPA입니다.*

반면 MPA란 Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.

SPA

SPA

MPA

MPA

여전히 MPA를 사용하는 사이트들이 있지만 MPA는 다음과 같은 단점들이 있기 때문에 AJAX가 등장하면서부터는 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고, 화면 깜빡임도 없는 SPA를 사용하게 되었습니다.

MPA 단점

SPA, MPA를 이야기한 이유는 CSR, SSR과 밀접한 연관이 있기 때문입니다.

그럼 본격적으로 CSR과 SSR에 대해 알아보면서 어떤 연관이 있는지 알아보겠습니다.

CSR & SSR (SPA, MPA 관계)

일반적으로 SPA에서는 렌더링 방식으로 CSR을, MPA 에서는 렌더링 방식으로 SSR을 채용합니다.

SPA는 웹 애플리케이션을 필요한 정적 리소스를 초반 한 번에 모두 다운로드 하고, 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 CSR을 사용하게 됩니다.