SPA 장,단점

장점

1. 사용자에게 앱이 보다 반응성있게 느껴지고, 페이지 전환 사이에 화면 깜빡임과 새로고침 딜레이를 보지 않아도 된다.

2. 서버에 더 적은 수의 HTTP 리쿼스트가 간다. (이미지 같은 요소가 페이지마다 로딩될 필요가 없기 때문)

3. 서버와 클라이언트 사이의 확실한 역할 구분이 이루어진다. (서버 코드의 수정 없이 다른 플랫폼의 새로운 클라언트를 쉽게 만들 수 있다.) 

 

단점

1. 스크립트, 스타일시트 등 필요한 리소스가 많아서 초기 로딩이 더 무거워진다.

2. 서버에서 모든 라우트로의 요청을 1개의 시작 라우트로 리다이렉트 되도록 설정해야 하고, 클라이언트 사이드에서도 라우팅을 직접 처리해야한다.

3. SPA는 컨텐츠의 렌더링을 자바스크립트에 의존한다. 하지만 모든 검색 엔진이 크롤링 중에 자바스크립트를 실행하지는 않기 떄문에, SEO의 장애물이 된다. 그래도 SEO가 앱을 만들때 최우선의 요소는 아니기 때문에 SEO가 굳이 필요하다면, 서버사이드 렌더링을 하거나, Preender(prerender.io/) 같은 서비스를 사용해서 자바스크립트로 브라우저에서 렌더링하고, HTML을 저장하여 크롤러에게 제공하도록 할 수 있다.

 

핵심은, 중복된 리소스 요청없이 정확히 필요한 요청만하기 때문에, 대부분의 경우 퍼포먼스 상 이득이 있고, 사용자에서 네이티브 앱과 비슷한 수준의 향상된 UX를 제공할 수 있기 때문에 인기가 높다.