MPA, SPA, SSR, CSR
MPA & SPA
MPA (Multi Page Application)
여러 개의 HTML로 이루어진 웹이나 어플리케이션을 의미한다.
이는 다소 전통적인 형태라고 볼 수 있는데 초기의 웹은 전부 이 형태를 갖추고 있었고,
현재에도 많은 웹과 어플리케이션에서 사용되고 있는 형태이기도 하다.
MPA는 SSR 방식으로 렌더링이 이루어지기 때문에 이에 따른 장점과 단점이 존재한다.
대표적 장점
- 페이지가 여럿이기 때문에 페이지마다 메타태그를 넣어줄 수 있어 SEO(Search Engine Optimization) 측면에서 유리하다.
- 최초 로딩 시 화면에 UI가 보여지기까지 걸리는 시간이 적다.
대표적 단점
- HTML 파일을 새로 보여줘야 하기 때문에 페이지 이동 시 화면이 깜빡거린다.
- 페이지를 요청할 때 마다 HTML을 통째로 불러오기 때문에 중복 로딩이 이루어져 성능적 측면에서 좋지 않다.
- 모바일 앱 개발 시 백엔드 작업이 추가로 필요해 생산성이 떨어진다.
SPA (Single Page Application)
단 하나의 HTML로 이루어진 웹이나 어플리케이션을 의미한다.
이는 비교적 최근에 등장한 형태라고 볼 수 있는데 최근 많은 웹과 어플리케이션들이
채택하여 그 수가 늘어나고 있는 형태라고 볼 수 있다.
SPA는 MPA의 SSR 방식에 따른 단점들을 보완할 수 있는 CSR 방식을 적용하고 있으나
이 역시도 이에 따른 장점과 단점이 존재한다.
대표적 장점
- 최초 로딩 시 리소스를 전부 로드해 온 후 상호작용에 따라 필요한 부분만 새로 불러오기에
화면 이동 시 화면의 깜빡임이 없다. - 모든 페이지를 매번 불러오는 것이 아니기 때문에 성능적인 측면에서 좋다.
- 모바일 앱 개발 시 백엔드 작업이 추가로 필요하지 않고, 그대로 사용할 수 있는 부분이 많아 생산성이 좋다.
대표적 단점
- 최초 로딩 시 화면에 UI가 보여지기 까지 걸리는 시간이 길다.
- 페이지가 하나이기 때문에 메타태그를 세분화할 수 없어 SEO 측면에서 불리하다.
SSR & CSR
SSR (Server Side Rendering)
브라우저(클라이언트)가 데이터를 요청하면 서버 측에서 여러 데이터를 포함한 완전한 페이지를 구성(렌더)하여
이를 통째로 브라우저로 전달해 렌더링하는 방식을 말한다.
CSR (Client Side Rendering)
브라우저(클라이언트)에서 페이지를 최초로 로딩할 때 HTML을 비롯한 Javascript와 CSS 등의
각종 데이터와 리소스를 받아와 데이터 요청이 이루어지거나 사용자의 상호작용에 따라 동적으로 렌더링하는 방식을 말한다.