옛날에 정리한 글인데 다시 한번 더 정리해서 작성해봄!
웹 개발을 하다보면 SPA? CSR? SSR? 이러한 용어들을 자연스럽게 접하게 되고
면접에서도 자주 등장하는 용어들 중 하나이다.
하지만 정작 SPA와 CSR을 동일시 여기는 경우도 생기게 된다.(잘못 이해한다면!)
이 글에서는 "구조", 그리고 "렌더링 방식"으로 나눠서 구분짓고자 한다.
⚠️ 구조 그리고 렌더링 방식
페이지 로드 방식이라는 설명도 가능하나 여기서는 "구조" 라고 지칭
단순히 "구조" 라는 용어는 애매하다. 단순히 구조라는 용어로 설명하기엔 부족한 점이 많다.
그래서 SPA와 MPA는 다음과 같이 자세하게 설명할 수 있다.
- SPA: 클라이언트 중심 애플리케이션 "구조"
- MPA: 서버 중심 페이지 "구조"
차이점은 SPA는 클라이언트, MPA는 서버가 중심이 된다.
📌 1. SPA (Single Page Application)
-
서버로부터 완전한 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 변경하는 애플리케이션/웹사이트
→ 처음 페이지를 불러올 때 HTML, CSS, JS 파일을 전부 미리 받아와서 미리 클라이언트 측에서 준비를 해놓는 상태를 말한다. -
초기의 SPA는 AJAX 통신을 활용하여 필요한 데이터를 동적으로 바인딩하는 방식
→ 하지만 모든 과정을 순수 AJAX로 구현하기에는 너무 많은 비용이 들어 이를 도와주는 프레임워크들이 대두
프레임워크
- React, Vue, Angular와 같은 프레임워크 SPA 서비스를 위해 많이 쓰임
⚠️ 참고
SPA: 위키피디아
SPA의 장단점
1. 장점
-
초반 렌더링 시, 어플리케이션 가동에 필요한 정적 파일을 받아오므로 이후 새로고침을 할 필요가 없음
-
끊기는 모습이 없는 부드럽고 자연스러운 사용자 경험 제공
-
TTV와 TTI가 동시에 시작되기에, 사용자는 페이지가 로딩되자마자 곧바로 애플리케이션을 사용할 수 있음
-
이후의 동적에서 추가적인 정보가 필요한 경우에는 필요한 리소스만 요청하기에 서버와 부담이 상대적으로 적음
-
기존에는 서버에서 렌더링 된 페이지를 받았다면 SPA의 경우 최초 요청 이후 내부에서 렌더링을 하기에 서버의 부담을 분산시킴
2. 단점
-
초기에 애플리케이션 가동에 필요한 대부분의 리소스를 받아야 하기에, 곧바로 페이지를 로딩하지 못함
-
TTV가 상대적으로 늦음, 페이지 렌더링 전까지 사용자는 빈 화면만을 바라봄
→ SPA의 경우: JS까지 다 받아야 보이므로 TTV가 느림 -
이를 해결하기 위해 많은 양의 Js 코드를 번들링하여 분할 제공하는 Code Splitting 기법이 있으나, 근본적인 해결X
-
SEO를 진행하기 어려움, 서버에는 초기 HTML이 비어있는 경우가 많기 때문
-
사용자의 정보를 클라이언트 측에서 관리할 경우, 보안 이슈가 발생할 수 있음(저장할 공간이 쿠키, 스토리지 뿐)
⚠️ NOTE
TTV (Time To View)
TTI (Time To Interact)
📌 2. MPA (Multiple Page Application)
-
SPA 이전에 쓰인 전통적인 페이지 로드 방식
-
여러개의 페이지로 이루어진 어플리케이션이며 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스를 전달
-
현재 페이지에서 다른 페이지로 이동하거나, 새로고침이 진행될경우 서버에서 페이지를 다시 렌더링 해야 함.
MPA의 장단점
1. 장점
-
서버에서 사전에 렌더링 된 정적 리소스를 받음으로서 빠르게 애플리케이션 화면을 띄울 수 있다.
-
TTV가 SPA에 비해 월등히 빠르다. 사용자는 사전에 렌더링 된 페이지를 띄우기만 하면 되기 때문
-
SEO에 유리(서버에서 사전에 만들어진 HTML을 전달 받기 때문)
2. 단점
-
화면을 빠르게 띄울 수 있으나, 동적인 인터렉션을 담당하는 JS 파일을 적용하기까지의 텀이 있다.
-
TTI가 TTV보다 상대적으로 늦고, 그 시간 동안 사용자는 어떠한 인터렉션도 진행 불가
→ MPA의 경우: HTML은 빨리 띄우지만, JS 적용까지 시간이 걸리므로 TTI가 느림
-
페이지를 이동할 때마다 결국 서버에서 사전에 렌더링 된 파일을 받아야 하기에, 매 요청마다 깜빡임 현상이 발생
-
서버에서 매 요청 시에 보내야 할 데이터의 사이즈가 커짐으로서 서버 트래픽이 증가
