[Web] SPA (Single Page Application)

과거의 웹 사이트

전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었습니다.

그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했습니다. 

그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고,

매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다.

 

SPA란 ?

 

이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)입니다.

어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA입니다.

뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어나게 해줍니다.

페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것입니다.

 

장점

1. 사용자 친화적(빠른 반응성, 화면 전환 애니메이션)입니다.
2. 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적입니다.
3. 서버 요청이 적습니다.

단점

1. 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸립니다.
2. 검색엔진 최적화(SEO): SPA의 소스코드는 최초에 앱을 실행하기 위한 script, link 태그나 데이터가 비어 있는 뷰 껍데기 정도로 구성되어 있을 뿐이라 웹 크롤러가 데이터를 수집할 수 없습니다. (극복 가능)