SPA는 Single Page Application의 약자로, 한 개(single)의 페이지로 구성된 어플리케이션이다.
SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
페이지 구성에 필요한 모든 정적 데이터를 초기 한번에 모두 다운받아 화면에 그려준다. 그 후 페이지 이동 시에는 변경되는 부분에 대한 데이터만 받아서 보여주는 방식이다.
즉, 클라이언트 관점에서 보면 최초 페이지를 로딩한 이후부터는 새로고침없이 화면을 구성하는 것이다.
따라서 페이지 이동이 빠르고 트래픽이 적다.
하지만 초기 구동 속도가 느리고 seo에 좋지않다.
MPA
MPA는 Multiple Page Application의 약자로, 여러 개(multi)의 페이지로 구성된 어플리케이션이다.
MPA는 SSR(Server Side Application) 방식으로 렌더링한다.
서버에서 렌더링되어 완성된 Html 파일을 클라이언트에 전달한다. 새로운 페이지를 요청하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
따라서 새로운 페이지를 이동하면 깜빡임이 발생한다. 또, 불필요한 부분도 중복해서 로딩하기 때문에 성능 저하 이슈가 생길 수 있다.
하지만 SEO에 유리하고 초기 구동 속도가 빠르다.
SPA vs MPA 정리
SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이고, MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.
SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 초기 로딩 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. 반면에 MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다.
그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말하고, MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.
CSR
CSR은 Client Side Rendering의 약자로,
서버가 요청을 받으면 클라이언트에게 각종 리소스를 보내주고 클라이언트가 그것을 받아 렌더링 하는 방식이다.
초기 이후 다른 페이지로 이동시에는 SSR보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.
단점은 처음부터 모든 HTML 컨텐츠를 가지고 있는 것은 아니기 때문에 SEO에 취약합니다.
SSR
SSR은 Server Side Rendering의 약자로,
서버 측에서 렌더링을 마친 상태로 데이터가 결합된 화면을 클라이언트에게 전달하는 방식이다.
완성된 Html을 전달받기 때문에 SEO에 매우 좋다.
하지만 새로운 페이지로 이동할 때마다 요청하기 때문에 깜박거리는 현상이 존재한다.
CSR vs SSR 정리
CSR과 SSR은 정적 리소스들이 어디에서 렌더링하는가에 따라 나뉜다.
서버에서 렌더링해서 완벽한 Html을 클라이언트로 보낸다면 SSR, 정적 리소스를 받아 클라이언트에서 렌더링한다면 CSR이다.
댓글남기기