용어사전

링크

Single, Multiple Page Application

1. SPA (Single Page Application)

• 하나의 페이지에서 새로운 페이지를 불러오지 않고, 필요한 부분만 동적으로 변경하는 애플리케이션
• 초기의 SPA는 AJAX 통신을 활용하여 필요한 데이터를 동적으로 바인딩하는 방식
• 하지만 모든 과정을 순수 AJAX로 구현하기에는 너무 많은 비용이 들어 이를 도와주는 프레임워크들이 대두 됨
• 현재는 React, Vue, Angular와 같은 프레임워크 SPA 서비스를 위해 많이 쓰이고 있음

SPA의 장단점

1. 장점

• 초반 렌더링 시, 어플리케이션 가동에 필요한 정적 파일을 받아오므로 이후 새로고침을 할 필요가 없음
• 끊기는 모습이 없는 부드럽고 자연스러운 사용자 경험 제공
• TTV와 TTI가 동시에 시작되기에, 사용자는 페이지가 로딩되자마자 곧바로 애플리케이션을 사용할 수 있음
• 이후의 동적에서 추가적인 정보가 필요한 경우에는 필요한 리소스만 요청하기에, 서버와 부담이 상대적으로 적음
• 기존에는 서버에서 렌더링 된 페이지를 받았다면, SPA의 경우 최초 요청 이후 내부에서 렌더링을 하기에 서버의 부담을 분산시킴

2. 단점

• 초기에 애플리케이션 가동에 필요한 대부분의 리소스를 받아야 하기에, 곧바로 페이지를 로딩하지 못함
• TTV가 상대적으로 늦음, 페이지 렌더링 전까지 사용자는 빈 화면만을 바라봄
• 이를 해결하기 위해 많은 양의 Js 코드를 번들링하여 분할 제공하는 Code Splitting 기법이 있으나, 근본적인 해결X
• SEO를 진행하기 어려움, 서버에는 초기 HTML이 비어있는 경우가 많기 때문
• 사용자의 정보를 클라이언트 측에서 관리할 경우, 보안 이슈가 발생할 수 있음(저장할 공간이 쿠키, 스토리지 뿐)

2. MPA (Multiple Page Application)

• 여러개의 페이지로 이루어진 어플리케이션, 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 정적 리소스를 전달함.
• 현재 페이지에서 다른 페이지로 이동하거나, 새로고침이 진행될경우 서버에서 페이지를 다시 렌더링 해야 함.

MPA의 장단점

1. 장점

• 서버에서 사전에 렌더링 된 정적 리소스를 받음으로서 빠르게 애플리케이션 화면을 띄울 수 있다.
• TTV가 SPA에 비해 월등히 빠르다. 사용자는 사전에 렌더링 된 페이지를 띄우기만 하면 되기 때문
• SEO에 유리하다, 서버에서 사전에 만들어진 HTML을 전달 받기 때문

2. 단점

• 화면을 빠르게 띄울 수 있으나, 동적인 인터렉션을 담당하는 Js 파일을 적용하기까지의 텀이 있다.
• TTI가 TTV보다 상대적으로 늦고, 그 시간 동안 사용자는 어떠한 인터렉션도 진행 불가
• 페이지를 이동할 때마다 결국 서버에서 사전에 렌더링 된 파일을 받아야 하기에, 매 요청마다 깜빡임 현상이 발생
• 서버에서 매 요청 시에 보내야 할 데이터의 사이즈가 커짐으로서 서버 트래픽이 증가