SPA(Single Page Application)
SPA (Single Page Application)란 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다.
MPA vs SPA
- MPA(Multi Page Application)
- 차이점
- 로딩방식- MPA : 클라이언트가 서버에 최초로 요청을 하면 하나의 정적인 페이지의 모든 소스를 가져옴 -> 다른 페이지로 이동하면 전과 같은 내용이라도 새로운 페이지 전체를 보내줌(브라우져가 깜빡임)
- SPA : 클라이언트가 최초로 요청을 하면 HTML, CSS, js등 사이트의 모든 필요한 소스를 가져옴 -> 다음 요청시에는 변경에 필요한 부분만 가져옴
SPA의 장단점
장점
-
페이지 로딩 속도가 빠르다.
사용자의 요청에 대해 CSR(클라이언트 사이드 렌더링)을 하기때문에 서버로부터 데이터를 매번 가져올 필요가 없어 페이지 이동 간 딜레이가 없다. -
사용자 경험이 우수하다.
빠른 속도, 짧은 로딩 시간
단점
-
최초 페이지 로딩 속도가 MPA에 비해 느리다.
최초로 요청할때 모든 데이터를 가지고오기 때문 -
SEO(검색 엔진 최적화)
- 자바스크립트
SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생
- 하나의 Meta Data
<Head>부분에 메타 태그를 삽입할 수 있지만, 해당 사이트 내의 다른 페이지로 이동하더라도 HTML은 변동되지 않기 때문에 모든 페이지에 동일한 메타데이터를 삽입하게 되는 상황이 발생
- 크롤러에게는 하나의 페이지
SPA 방식의 웹사이트의 경우 기본적으로 사이트 내의 페이지로 향하는 href속성을 html에서 사용하지 않고 자바스크립트로 페이지 이동을 구현하기 때문에 크롤러가 사이트에 있는 모든 페이지 (하나의 페이지이지만)의 내용을 크롤링하지 못하는 경우가 발생
- 자바스크립트
SPA 구현을 위한 프레임워크
- React, Vue, Angular
기억이 안되면, 기록을 -