[WEB] SPA(Single Page Application)란?

💡SPA(Single Page Application)란?

SPA란 용어 그대로 단일 페이지로 이루어진 애플리케이션이다. 기존에는 사용자가 새로운 페이지로 이동할 때마다 새로운 html을 받아와 페이지를 로드해 보여주었다. 새로운 화면을 보여주기 위해 매번 서버에 요청하기 때문에 성능상의 문제가 생길 수 있다. 그래서 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션인 SPA가 사용되고 있다. 

 

💡SPA 예

우리가 자주 사용하는 서비스인 페이스북, 에어비앤비, 트위터, 넷플릭스도 SPA로 만들어졌다. 

💡장점

• 1. 페이지 이동시 화면 전체를 렌더링 할 필요가 없어 로딩 속도가 빠르다. 

• 2. 프론트엔드와 백엔드의 분리되어 업무 분담이 용이하다.

• 3. 하나의 요청을 통해 서버의 모든 데이터를 저장하여 로컬 데이터를 효율적으로 캐시 할 수 있다.

 

💡단점

• 1. 웹 애플리케이션을 구현하는데 복잡하다. 

• 2. 처음 화면을 로딩할 때, 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드하기 때문에 초기 로딩 속도가 상대적으로 느리다. (보완: Lazy Loading, 비동기 모듈 로딩 - 리소스를 청크 단위로 묶어 해당 리소스에 대한 요청이 있을 때 다운받도록 한다. )

• 3. 초기 로딩 할 때 모든 리소스를 다운 받기 때문에 해당 페이지가 실제 검색 컨텐츠를 포함하지 않는 경우가 있어 검색 엔진 최적화(SEO) 어려움이 있다. (보완: Angular, react 등의 서버 렌더링 사용하기)

 

💡SPA를 위한 프레임워크

• Angular.js

  ex) Youtube

• React.js

  ex) 페이스북, 에어비앤비, 인스타그램

• Ember.js

  ex) 넷플릭스, 애플뮤직, 링크드인

• Backbone.js

• Vue.js