[Web] SPA와 MPA 정리 및 차이점 (feat. CSR와 SSR)

 

 

 

정리하기전에 SPA와 CSR, MPA와 SSR을 묶어서 좀 정리하려고 한다.

물론 같은 말은 아니지만 묶어서 정리하는게 이해하기 편해서...

 

 

SPA와 MAP의 차이점 요약정리

 

대충 SPA와 MPA의 차이점을 요약하면 위와 같다..

 

 

SPA와 CSR의 특징

 

SPA(Single Page Application): SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로

다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트를 말한다.(단일 페이지 어플리케이션)

 

CSR(Client Side Rendering): CSR은 웹페이지의 콘텐츠를 클라이언트(웹 브라우저)에서 랜더링 하는 방식을 말한다.

필요한 데이터만을 서버통신으로 가져와 클라이언트에서 랜더링 하는 방식을 일컫는다.

 

 

 

 

Vue나 React 프로젝트를 만들어 본 사람은 알겠지만, 실제로 html은 index.html밖에 없다.

이 index.html파일에 App 컴포넌트를 부착하고 해당 App 컴포넌트에 서비스 컴포넌트들을 붙이고, 라우터를 이용해

동적으로 컴포넌트들을 변경해준다.

 

이렇게 위와 같이 실제 페이지(여기서는 html)를 하나만 가지는 웹 어플리케이션을 SPA라고 한다..

 

단일페이지에 변경이 필요한 데이터에 대해서만 서버통신을 하고, 해당 데이터를 가지는 화면만 랜더링 하다보니

상대적으로 서버에 대한 부담이 적고, 랜더링 속도 또한 MPA보다 빠르다.

 

 

 

 

MPA와 SSR의 특징

 

MPA(Multi Page Application): 말 그대로 여러 개(multi)의 Page로 구성된 application이다.

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지 를 다시 렌더링 한다.

 

SSR(Server Side Rendering): 클라이언트가 요청한 페이지를 서버(Server)에서 모두 미리 구성한 뒤에 페이지를

랜더링 하는 방식을 말한다. 즉 서버 작업이 길어지면 페이지 랜더링 시간도 밀리게 된다.

 

 

위 그림을 보면 알다시피, 프로젝트에 여러 페이지들이 존재한다. 그게 html일 수도 있고 jsp가 될 수도 있고...

 

예를 들면 게시판 URL을 요청하면 게시판에 필요한 모든 정보(글 목록, 페이징 정보)를 처리하는 것과 같다.

 

근데 이러면 문제점이 서버에 부하가 많이 걸리게 된다. 왜냐하면 서버에서 각 작업을 처리하기 때문에

특정 데이터가 변경 되면 해당 페이지 내의 모든 데이터를 다시 처리해야 하기 때문이다.

 

 

 

 

그래서 좀 오래 된 사이트(보통 공공기관)에서 사람이 많이 접속하면 서버에 부하가 많이 걸려

느려진다. 이게 MPA 방식이기 때문..

 

 

 

 

 

결론

 

SPA가 좋다 MAP가 좋다가 아니라 개발환경에 맞게 개발하면 될 거 같다..

 

보안과 검색엔진이 중요한 곳은 MAP

접속자가 많아 부하가 많이 걸리거나, 깔끔한 페이지 이동을 원한다면 SPA가 아닐까 싶다..