[Vue.js] SPA(Single Page Application)

Vue.js

 

기존 웹페이지 방식 

페이지를 서버에 요청하고 받아 렌더링하는 형식 -> 서버사이드 렌더링 (jsp, php, asp ...)

페이지를 바꿀때 마다 로딩되므로 시간이 많이 걸린다.

 

SPA (Single Page Application)

최신 웹 프론트엔드 프레임워크의 방식 (Vue, React, Angular...)

최초 접속시 모든 css, javascript를 가져와 페이지를 구성하고 필요시 서버의 rest API 데이터를 비동기 요청하여 받아와 렌더링한다.

화면 구성에 필요한 소스들은 클라이언트가 갖고 있으므로 기존 웹페이지 방식보다 SPA방식이 속도가 빠르다.

 

SPA 장점

• 필요한 부분의 데이터만 서버에 받아서 렌더링하기 때문에 처리가 효율적이다.
• 화면 각각을 렌더링할 필요가 없어 화면 이동이 빠르다.

SPA 단점

• 처음 화면을 로딩할 때, 모든 구성요소를 로딩하기 때문에 첫 로딩에 시간이 비교적 소요된다.