MPA (Multi Page Application)

• 어플리케이션을 이용할 때 헤더가 고정되어 있는 것이 아니라, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 새로 렌더링하는 방식이다.
• 전통적인 웹페이지 구성 방식이다.
• 여전히 MPA를 사용하는 사이트들이 있기는 하지만, MPA는 여러 단점들이 있기 때문에, AJAX가 등장하고 부터는 SPA를 사용하게 되었다.
• 일반적으로 MPA에서는 렌더링 방식으로 SSR을 사용한다.
• 새로운 요청이 있을 때다 서버에서 이미 렌더링된 정적리소스를 받아오기 때문에 렌더링 방식으로 SSR을 사용하게 된다.
• 페이지 내에서 다른 링크를 클릭하면, 다시 서버에서 해당페이지의 HTML을 받아와서 페이지 전체가 업데이트 되어야하므로 화면 전체가 깜빡이는 다소 불편한 사용자 경험(User Experience)을 제공하는 것이 특징이다.
• php, JSP를 사용해서 MPA를 만들면, 자연스럽게 SSR 사용하게 된다.
  
  

SPA (Single Page Application)

• 하나의 페이지로 구성된 웹 어플리케이션이다.
• 어플리케이션을 이용할 때 헤더는 고정되어 있고, 탭을 이동할 때마다 내용만 바뀌는 사이트들이 이에 해당한다.
• 일반적으로 SPA에서는 렌더링 방식으로 CSR을 사용한다.
• 웹 어플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운로드 하고, 그 이후 페이지 요청이 있을 때 필요한 데이터만 전달받아 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 CSR을 사용하게 된다.
• 이미 가져온 페이지를 요청에 따라 숨기고 보여주는 방식이기 때문에, 끊김이 없고 부드러운 사용자 경험(User Experience)을 제공하는 것이 특징이다.
• 리액트, 뷰, 앵귤러를 사용해서 SPA를 만들면, 자연스럽게 CSR을 사용하게 된다.
• 최근 가장 많이 사용되는 것이 SPA이다.

하지만 SPA는 무조건 CSR, MPA는 무조건 SSR인 것은 아니다. 이 두 개념은 페이지가 몇개냐, 렌더링을 어디서 하냐에 따라 달라지는 다른 개념이라는 것을 기억하자. 해당 개념들은 CSR, SSR과 밀접한 연관이 있기 때문에 다음 게시물도 참고해보길 바란다.

CSR, SSR, GSR 각각의 특징과 차이점

참고문헌 우아한 테크소스