SPA (Single Page Application )

1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다.

 

2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며,

이것이 싱글 페이지 애플리케이션, 즉 SPA입니다.

 

SPA는 서버로부터 새로운 페이지를 불러오는 것X,

업데이트하기 위한 데이터만 서버에서 전달받아

브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말함

 

대표적으로 유튜브, 그리고 페이스북, 구글메일, 에어비엔비, 넷플릭스 등

 

SPA의 장점

• 필요한 부분만 업데이트하면 되지 때문에 사용자와의 interaction 에 빠르게 반응함
• 서버에서는 요청받은 데이터만 넘겨주며 서버 과부하 문제가 현저하게 줄어든다.
• 전체 페이지를 렌더링 할 수 없어 더 나은 유저경험을 제공

SPA의 단점

브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거칩니다. 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다.

•  JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어짐
• HTML이 거의 비어있다 보니  검색 로봇이 충분한 자료를 수집하지 못해 검색엔진 최적화( SEO )에 좋지 않음

*검색 로봇이 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석하고, 자료를 수집해서 노출에 반영합니다. 다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세입니다.