SPA(Single Page Application)

SPA란?

단일 페이지 애플리케이션

기존의 전통적인 새로고침 방식의 웹과는 달리 필요한 정적파일을 한번에(나눠서도 가능) 모두 다운로드 받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 동적(비동기)으로 받게하여 트래픽의 총량을 줄이고, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있는 어플리케이션 형태
첫 페이지 요청시 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 이후로는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신

필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있음

👉 만약 데이터가 전혀 필요 없다고 한다면 서버와 통신할 일 없음

 

SPA 방식은 Angular, React, Vue.js 등 걸출한 프론트엔드 기술들이 나오면서 크게 유행함

SPA와 대비되는 의미로 페이지 별로 서버에서 받아오는 방식에 대해서는 MPA(Multi Page Application)이란 용어를 사용

SPA에서는 주로 클라이언트 쪽에서 화면을 구성하므로 Client Side Rendering(CSR)으로 불리기도 함

MPA의 경우는 주로 서버가 화면을 구성하기 때문에 Server Side Rendering(SSR)이라고 부름

 

 

---

 

SPA의 장점

1️⃣ 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 사용자 경험을 제공함

사실상 로딩 이후에는 모바일 앱과 동일한 방식으로 동작을 한다고 볼 수 있음

2️⃣ 페이지를 이동 하더라도 필요한 부분 (컴포넌트)만 부분적으로 교체하면 되므로 효율성이 증가

3️⃣ 서버가 해야 할 화면 구성을 클라이언트가 수행하므로 서버 부담이 경감

4️⃣ 모듈화 또는 컴포넌트별 개발이 용이

5️⃣ 백엔드와 프론트엔드가 비교적 명확하게 구분됨

6️⃣ 앱과 웹이 동일한 서버를 이용할 수 있음

7️⃣ PWA(Progressive Web App)과 궁합이 잘 맞음

 

SPA는 일단 로딩이 된 후에는 네이티브 앱과 비슷한 수준의 향상된 사용자 경험(UX)을 제공할 수 있음

중복되는 리소스 없이 필요한 요청만 하게 되므로 효율성이 증가

또한 최근의 프론트엔드 라이브러리는 HTML 히스토리 모드를 지원하므로, SPA에서도 자연스러운 URL 이동을 구현할 수 있음

 

---

 

SPA의 단점

1️⃣ 처음 접속시에 사이트 구성과 관련된 모든 리소스를 한 번에 받기 때문에 초기 구동 속도가 느릴 수 있음

2️⃣ 데이터를 별도로 요청하고 받아와서 화면을 구성하므로 설계 방식에 따라서는 화면이 변하는 모습이 사용자에게 노출될 수 있음 

3️⃣ SPA 구조 상 데이터 처리는 클라이언트에서 하는 경우가 많은데, 중요한 비즈니스 로직이 존재한다면 사용자가 굳이 파헤쳐 보겠다 하면 막기 어려움

4️⃣ 검색엔진 최적화(SEO)가 어려움

 

1️⃣과 2️⃣ 단점은 lazy loading, pre-rendering을 통해서 어느 정도 극복이 가능

3️⃣과 같은 경우, 노출되어서는 안 되는 중요한 로직이 있다면 해당 기능만 API를 통해서 서버에서 처리하도록 하면 그만이기에 다소 비효율적이긴 하더라도 큰 문제는 아님

 

사실 근본적인 문제는 결국 SEO

이는, 검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 있는 그대로 긁어가기 때문에 문제가 발생

즉, 사용자가 인지하는 화면과 검색 엔진이 인지하는 화면이 다르게 되는 것임

전통적인 MPA의 경우 사용자 단에서 이미 완성된 형태의 템플릿(HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받기때문에 검색 로봇이 페이지를 크롤링하기에 적합함