Single Page Application

SPA란?

SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다.

• 위키백과

전통적인 웹 방식

• 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식
  • 새로고침이 발생되어 사용성이 좋지 않다.
• 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신
  • 비효율적이다.

모던 웹 패러다임, SPA

• 모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 중요한 이슈
• SPA의 핵심 가치는 사용자(UX) 경험 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어 Mobile First 전략에 부합

SPA의 특징

• 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드
• 새로운 페이지 요청 시, 갱신에 필요한 데이터만 전달받아 페이지 갱신
  • 전체적인 트래픽 감소
  • 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험 제공

SPA 구조에서 발생하는 문제

• 초기 구동 속도가 상대적으로 느리다.
  • 최초에 모든 정적 리소스를 한 번 다운로드하기 때문이다.
  • 하지만 SPA는 웹 페이지보다 애플리케이션에 적합한 기술이므로 다른 장점을 고려해보면 결정적인 단점이라고 할 수는 없다.
• SEO(검색엔진 최적화)¹ 문제
  • SPA는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다.

---

---

참고
Single Page Application & Routing
SPA 단점에 대한 단상

1. SEO(Search Engine Optimization)는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. ↩