SPA란 Single Page Application 의 약자로
기존의 웹 페이지는 페이지 자체가 여러개 존재하고
원하는 정보가 있으면 새 데이터를 요청할 때 마다
전체 페이지가 다시 로드 되었다.
하지만 SPA를 사용하게 되면
맨 처음 로딩할 때 하나의 페이지를 불러오고
그 페이지에서 JSON/XML 등의 데이터를 동적으로 가져오는 형태로 페이지를 바꿔나간다.
즉, 새로고침이나 새로운 페이지를 부르지 않고
데이터를 가지고만 페이지를 운영한다.
1. SPA의 장점
그렇다면 왜 기존의 페이지를 불러오는 방식이 아닌
SPA 방식을 사용하는지 즉, 장점에 대한 생각을 해봐야한다.
1. 사용자가 페이지를 이용할 때의 속도가 빠르다. (반응성이 빠르다)
: 초기 로딩에 데이터를 가져오기 때문에 로딩이 된 후에는 새로고침 없이 빠르게 페이지를 이용할 수 있다.
2. 화면에 필요한 데이터만 가져와서 렌더링 하기 때문에 효율적이다.
3. 신속한 개발이 가능
: 단일 페이지 응용 프로그램 아키텍처가 분리되어 있기 때문에 프론트엔드와 백엔드 개발 서비스를 분리하여 작업할 수 있다. 그렇기 때문에 개발자는 독립적이고 신속하게 작업을 할 수 있다.
4. 캐싱 능력
: 데이터에 대한 지속적인 액세스가 있기 때문에 캐싱 관리하기에 수월하다.
2. SPA의 단점
SPA가 장점만 갖고있는 것은 아니라
SPA를 사용했을 때의 단점도 몇 가지 있다.
1. 초기 로딩시에 데이터를 가져오는 문제로 초기 로딩 속도 저하의 문제가 발생할 수 있다.
2. 검색엔진최적화 (SEO)에 어려움이 있을 수 있다.
: 스크립트 언어로 화면의 전환이 되기 때문에 검색엔진에서 크롤링 하기가 어렵다.
참고
https://www.excellentwebworld.com/what-is-a-single-page-application/
'Frontend > Vue.js' 카테고리의 다른 글
[vue 2 기초] 라우터 (1) | 2023.11.06 |
---|---|
[vue 2 기초] 컴포넌트 통신(props, event emit) (1) | 2023.11.04 |
[Vue 2 기초] 컴포넌트 (0) | 2023.11.03 |
[Vue 2 기초] 인스턴스 (0) | 2023.11.03 |
Vue.js 란? (0) | 2023.11.03 |