[WEB] SPA란?

SPA (SIngle-Page-Application)란 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다.

 

 즉, SPA는 웹 앱에 필요한 모든 정적 리소스를 한번 다운해서 페이지를 이동했을때 갱신이 필요한 부분만 렌더링 하는 방식입니다. 쉽게 말해서 페이지 하나로 계속 우려 먹는다고 생각하면 될 것 같아요.

 

예전 방식에는 link 태그를 사용하는 방식으로 새로운 페이지 요청을 할때마다 리소스를 다운로드하여 전체 페이지가 렌더링하는 새로고침이 발생된다고 합니다

예전 방식과 SPA방식 차이

SPA의 내용을 간략화 하면 아래와 같다

	장점	단점
SPA	화면전체를 렌더링 할 필요가 없어서 화면 전환이 빠르다 필요한 부분의 데이터만 받기 때문에 처리과정이 효율적이다 유저에게 사용성이 좋다	처음에 전부 다운 받아서 로딩시간이 길다 SEO 문제가 있다

SEO란?

SEO(검색엔진 최적화)는 검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작, 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 기능을 한다

 

이것도 대충말해서 알고리즘의 간택이라고 할 수 있겠다

쨋든 SPA가 자바스크립트만으로 코드가 있어서 SEO가 크롤링을 못해서 간택을 못 받을 수 있다

반대로 전통적인 방식은 SEO에 친화적이다

그래도 SEO 기술을 쓸 수 있는 Reat, Angular라는 라이브러리나 프레임워크가 존재하니 신경쓰이면 저거 쓰는게 좋을 듯 하다

 

 

 

여담으로 대표적인 SPA는 Reat, Vue, Angular등이 있습니다

 

 

 

https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98