웹 어플리케이션 개발을 한다고 하면 대부분 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을 사용하게 됩니다.