웹 어플리케이션 개발을 한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해서 SPA를 개발하게 됩니다.
*SPA
란 Single Page Application의 약자로, 하나의 페이지로 구성된 웹 어플리케이션 입니다. 어플리케이션을 이용할 때 헤더는 고정되어있고, 메뉴를 선택하면 메인 화면 부분, 혹은 클릭한 부분만 바뀌는 그런 웹사이트들을 SPA입니다.*
반면 MPA
란 Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.
SPA
MPA
여전히 MPA를 사용하는 사이트들이 있지만 MPA는 다음과 같은 단점들이 있기 때문에 AJAX
가 등장하면서부터는 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고, 화면 깜빡임도 없는 SPA를 사용하게 되었습니다.
MPA 단점
SPA, MPA를 이야기한 이유는 CSR
, SSR
과 밀접한 연관이 있기 때문입니다.
그럼 본격적으로 CSR과 SSR에 대해 알아보면서 어떤 연관이 있는지 알아보겠습니다.
일반적으로 SPA
에서는 렌더링 방식으로 CSR
을, MPA
에서는 렌더링 방식으로 SSR
을 채용합니다.
SPA는 웹 애플리케이션을 필요한 정적 리소스
를 초반 한 번에 모두 다운로드 하고, 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 CSR을 사용하게 됩니다.