SPA(Single Page Application)

- SPA (Single Page Application) : 단어를 그대로 해석하면 단일 페이지 어플리케이션이다.

 

서버로부터 새로운 페이지(HTML)를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자에게 더 나은 UX를 제공할 수 있다.

 

SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다.

페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 Json으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않는다.

 

위의 그림들을 보면 더 직관적으로 이해할 수 있을 것이다.

 

- 장점

  1. 자연스러운 사용자 경험(UX) : 전체 페이지를 업데이트할 필요가 없어서 깜빡거림이 안생긴다.

  2. 필요한 리소스만 부분적으로 로딩 : 정적리소스를 한 번만 요청하며 받은 데이터는 캐싱해놓는다.

  3. 서버의 템플릿 연산을 클라이언트로 분산

  4. 컴포넌트별 개발 용이

 

- 단점

  1. 처음에 한 번에 데이터를 받기 때문에 초기 구동이 느리다.

  2. 검색 엔진 최적화 (SEO)가 어렵다.

  3. 보안 이슈가 생길 수 있다. : 서버측에서 세션으로 관리할 수 있지만 클라이언트측은 쿠키 말고는 마땅히 없음