MPA와 SPA(SSR과 CSR)

MPA? SPA?

MPA이란?

두개 이상의 페이지로 구성된 application. interaction이 발생할 때마다 해당 링크로 이동하여 application이 다시 새로고침되는 전통적인 방식으로 동작한다. (SSR)

MPA는 SSR(Server Side Rendering)방식을 채택한다.

SSR이란?

서버로부터 데이터까지 완전한 HTML 파일을 받아와 페이지 전체를
서버에서 렌더링하는 방식.
요청에 따른 필요한 부분을 수정하지 않고 항상 새로운 페이지를 받는다.
이런 이유로 앱이 다시 시작되고 화면이 깜빡인 후에 표시된다.

SSR의 장점

1. SEO(검색 엔진 최적화)에 유리하다.

   • SSR을 채택하는 MPA는 화면을 구성하는 각각의 페이지가 있기 때문에
     SEO에 유리하다.

2. 빠른 초기 로딩 속도

   • 서버로부터 완성된 파일을 먼저 받아오기 때문에 CSR보다 초기 로딩속도가 빠르다.

SSR의 단점

1. 사용자 경험

   • 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 떨어진다.

2. 서버 부하

   • 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를
     준비해야 하기 때문에 서버 부담이 증가한다.

SPA이란?

하나의 페이지로 구성된 application을 의미한다. SPA는 렌더링 방식으로 CSR을 채택한다.

CSR이란?

사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식. 서버에서 렌더링을 하지 않고 클라이언트에서 렌더링을 하는 방식.

CSR의 장점

1. 빠른 속도 및 서버 부하 감소

   • CSR은 변경된 부분과 관련된 데이터만 가져오므로
     SSR보다 빠른 속도를 보입니다. (초기에는 SSR보다 느리다.)
     또한 변경된 부분만 요청하므로 서버의 부담을 줄일 수 있다.

2. 사용자 편의성

   • 깜빡임 없는 부드러운 화면전환.

CSR의 단점

1. SEO(검색 엔진 최적화)에 불리

   • 서버에서 완성된 HTML을 보내주는것이 아니기 때문에 SEO에 불리하다.

2. 느린 초기 로딩 속도

   • 초기에 번들링된 JS파일을 모두 가져와야 하기 때문에 초기 로딩 속도가 느리다.
     (오히려 사용자 경험을 떨어뜨릴수 있다.)

참고자료 (reference)

CSR, SSR, SPA, MPA? 상사한테 혼나기 전에 알아야하는 것
The Benefits of Server Side Rendering Over Client Side Rendering
SPA vs MPA와 SSR vs CSR 장단점 뜻정리

---

틀린점, 오타에 대한 것은 언제든지 알려주세요!