싱글페이지 애플리케이션(SPA; Single-page application)

 

싱글페이지 애플리케이션

웹 서버로부터 새로운 페이지를 로드하지 않고 현재 웹 페이지를 동적으로 다시 작성하여 사용자와 상호작용하는 웹 애플리케이션이나 웹사이트를 말한다.

예를 들어, 이메일 페이지와 같이 사이드바와 헤더는 그대로 유지되고 컨텐츠 항목만 변경되는 경우를 싱글페이지 애플리케이션이라고 할 수 있다.

SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.

✔ 전통적인 웹 애플리케이션 VS SPA

기존의 link tag를 사용하는 전통적인 화면 전환 방식은 새로운 페이지 요청시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용해 새로고침이 발생되어 사용성이 좋지 않다.

또한 변경이 필요없는 부분까지 포함한 전체 페이지를 갱신하므로 비효율적이다.

SPA에서는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 다운로드 한다. 이후 새로운 페이지 요청시 새로고침 없이 페이지 갱신에 필요한 부분만을 JSON으로 전달받아(동적으로 불러들여) 페이지를 갱신하므로 전체적인 트래픽을 감소시킬수 있고, 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

✔ SPA의 장점

• HTML, CSS, JS 등을 한번만 다운로드 한다.
• 서버에 추가 쿼리가 필요없기때문에, 동일한 양의 트래픽에 대해 더 적은 수의 서버를 사용하여 비용을 절약할 수 있다.
• SPA의 분리된 아키택쳐 또는 백엔드 서비스와 프론트엔드 디스플레이의 분리때문에 프론트 엔드를 더 빠르게 구축할 수 있다.
• 독립적으로 업데이트될 수 있는 모듈식 서비스(마이크로서비스 아키택쳐)로 구축되어 기능이 표시되고 사용되는 방식을 실험하기 더 쉬워진다.

✔ SPA의 단점

• 초기 구성속도

SPA는 웹 애플리케이션이 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드 하기때문에 초기 구성속도가 상대적으로 느리다.

하지만 SPA는 웹 페이지보다는 애플리케이션에 적합한 기술이므로 트래픽 감소와 속도, 사용성, 반응성 향상등의 장점을 생각한다면 치명적인것은 아니다.

• SEO(검색엔진 최적화) 이슈

SPA는 일반적으로 서버 사이드 랜더링(SSR)방식이 아닌 자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링(CSR) 방식으로 동작한다.

클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다.

이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다.

• SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

---

References.

SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Single-page application - Wikipedia

[IT정보] 싱글 페이지 애플리케이션(Single Page Application, SPA) 개념

SPA & Routing | PoiemaWeb

What Is a Single Page Application? | Bloomreach