[Web App]싱글 페이지 어플리케이션 (SPA-Single Page Application)

SPA란?

  단일 페이지 애플리케이션. 정적파일을 한번에(나눠서도 가능) 모두 다운로드받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 (비동기)동적으로 받게 해 트래픽의 총량을 줄이는 애플리케이션 형태. 웹의 사용성(UX), 속도 향상의 이점을 가지므로 모바일 퍼스트(Mobile First)전략에 부합한다. 웹 페이지인데 데스크탑 애플리케이션처럼 동작하는 웹 페에지. 

SPA의 장점

 

- 사용자 친화적(빠른 반응성, 화면 전환 애니메이션) 

client rendering, router

- 서버 요청이 적음.

- 개발이 간단하고 능률적. 

페이지를 렌더링하기 위해 서버에 코딩할 필요가 없다. 서버 이용 없이 파일로부터 개발을 시작할 수 있기 때문에 시작하기 훨씬 쉽다.

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

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

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

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

SPA의 단점

  

- 초기 구동 속도

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

- 검색엔진 최적화(SEO)

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

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

- 보안

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

- IE8이하 지원

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

극복방안

  

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

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

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

- IE8을 버리자 (...)

Multi-Page Application

 

- "고전적인" 방식으로 동작한다. 모든 변경사항 요청은 브라우저에서 서버로부터 새로운 페이지를 렌더링한다. Ajax를 이용해 페이지의 특정 부분만 바꿀 수 있도록 발전했지만, SPA보다 개발하기 복잡하고 어렵다.

- 장점 : 뚜렷하고 얕은 메뉴 탐색, 쉽고 정확한 검색 최적화 제공

- 단점 :  프론트와 백엔드의 결합도 높음, 개발이 복잡해짐