SPA(Single Page Application)

정의

서버에서 HTML을 생성하고 브라우저는 출력하기만 하는 전통적인 형태가 아니라,
서버가 하던 대부분의 작업을 브라우저에서 처리하는 웹 애플리케이션 개발 방법이다.
대표적인 SPA 개발을 위한 라이브러리로는 React 프레임워크로는 Angular, Vue, Blazor등이 있다.

탄생배경

옛날 웹사이트 환경은 페이지 이동시에 서버에서 매번 HTML 문서를 브라우저에 출력하는 방식이였다. 근데 현대에 이르러서는 점차 웹 사이트가 고도화 됨에 따라 매번 새로운 페이지를 전달하는 게 점점 버거워졌다. 이러한 문제를 해결하기 위해 등장한 것이 SPA이다.

장점

● 페이지의 필요한 부분만 업데이트 하기 때문에 트래픽이 적고 페이지 이동이 그만큼 빨라진다.
● 최초접속시 필요한 모든 정적 리소스들을 다운받고 이미 방문한 페이지도 캐싱함
● 사용자 친화적으로 만들 수 있다.
● 모듈화나 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도를 빠르게 만들어줌
● 프론트와 백엔드의 분리로 개발업무 분업화가 쉽다.

단점

● 리소스를 초기에 다 다운받기 때문에 초기 구동속도가 느림
● HTML렌더링을 클라이언트에서 하기 때문에 검색엔진최적화(SEO)가 어렵다.