SPA(Single Page Application)

 

싱글 페이지 어플리케이션(single-page-application)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 렌더링 하는 웹 어플리케이션 혹은 웹사이트를 말합니다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어 Mobile First전략에 부합합니다.

 

전통방식?

link tag를 이용하는 전통적인 화면 전환 방식은 새로운 페이지 요청 시마다 정적리소스가 다운되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생합니다. 간단한 웹페이지라면 문제될 것이 없겠지만 복잡한 웹페이지의 경우, 요청마다 중복된 html, css, javascript를 매번 다운로드해야하므로 속도 저하의 요인이 됩니다.

 

AJAX

전통적 링크 방식의 단점을 보완하기 위해 등장한 것이 ajax(Asynchronous JavaScript and XML)라고 합니다. ajax는 자바스크립트를 이용해서 비동기적으로 서버와 브러우저가 데이터를 교환할 수 있게 합니다. SPA는 클라이언트가 받은 JSON을 토대로 하기 때문에 CSR(Client Side Rendering)방식으로 렌더링 합니다.

 

SPA 장·단점

• 장점 : 페이지의 필요한 부분만 업데이트 되므로 트래픽이 적고, 페이지 이동 속도가 빨라집니다. 최초접속시 필요한 모든 정적 리소스들을 다운받고 이미 방문한 페이지도 캐싱합니다. CSR의 특징을 이용해 페이지 화면전환 애니메이션을 넣어서 사용자 친화적으로 만들 수 있습니다. 모듈화나 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도를 빠르게 해준다는 장점이 있습니다.
• 단점: 리소스를 초기에 다 다운받기 때문에 초기 구동 속도가 느립니다. html 렌더링을 클라이언트에서 하기 때문에 검색엔진최적화(SEO)가 어렵습니다. 이런 단점을 해결하기 위해 webpack의 code splitting, lazy loading, SSR 기술이 있습니다.

 

참고사이트

https://www.excellentwebworld.com/what-is-a-single-page-application/
https://poiemaweb.com/js-spa
https://www.zerocho.com/category/HTML&DOM/post/594bc4e9991b0e0018fff5ed