[WEB] SPA(Single Page Application)란?

SPA(Single Page Application)란?

단일 페이지로 구성된 웹 어플리케이션으로 현재 웹 개발의 트랜드라고 합니당.

 

 

기존 웹 서비스는 

요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. 

기존 웹 페이지

 

SPA형태는 

브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.

SPA

 

SPA의 장점

(1) 사용자 친화적 (빠른 반응성, 화면 전환 애니메이션) : client rendering, router

(2) 서버 요청이 적음

(3) 개발이 간단하고 능률적

     : 페이지를 렌더링 하기 위해 서버에 코딩할 필요가 없다.

     : 서버 이용 없이 파일로부터 개발을 시작할 수 있기 때문에 쉽다.

(4) 네트워크 작업을 모니터링하고 페이지 요소 및 이와 관련된 데이터를 조사할 수 있기 때문에 크롬에서 디버그가 쉽다

(5) 개발자는 웹과 네이티브 모바일 앱의 동일한 백엔드 코드를 재사용할 수 있기 때문에 모바일 웹을 만들기 더 쉽다.

(6) 어떤 로컬 저장소라도 효율적으로 캐시할 수 있다.

(7) 프론트엔드와 벡엔드 분리로 인한 개발업무 분업화 및 협업이 용이하다.

 

 

 

SPA의 단점

(1) 초기 구동 속도

웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동속도가 상대적으로 느리다.

(2)검색엔진 최적화(SEO)

SEO : 웹 페이지의 방문 트래픽을 높이기 위해 구글, 네이버 등의 검색 엔진이 수집하기 적절하기 HTML을 구성하는것

SPA의 소스코드는 치초에 앱을 실행하기 위한 script, link 태그나 데이터가 비어 있는 뷰 껍데기 정도로 구성이 되어 있을 뿐이라 웹 크롤러가 데이터를 수집할 수 없음

(3) 보안 : Cross-Site Scripting(XSS)를 통해 다른 사용자들로 하여금 공격자가 클라이언트측 스크립트를 주입할 수 있다

(4) IE8이하 지원

(5) 자바스크립트의 메모리 누수가 시스템을 느리게 만들 수 있다.

 

 

극복방안

(1) 초기 페이지에서 모든 리소스를 다운로드 받지 않고, 리소스를 청크(Chunk)단위로 묶어 해당 리소스에 대한 요청이 있을 때만 다운로드 받도록 함(자바스크립트 모듈 번들러에서 Lazy Loading, 비동기 모듈로딩이 이런 방식을 지원)

(2) perender.io(상용 솔루션), Angular, React의 서버랜더링

(3) 클라이언트에서 수행되는 핵심 로직을 최소화

 

 

 

참고
https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/
https://junsday.tistory.com/40