SPA(Sigle Page Applications) 란 무엇인가?

먼저 SPA (Single Page Application)가 필요한 이유부터 살펴 보면, 단일 페이지 응용 프로그램은 수년간 사용되어 왔지만 일반적인 웹상에서는 찾아보기가 어렵습니다.

그렇지만, 앞으로 많은 웹사이트가 SPA로 개발될 아주 좋은 계기가 있습니다.

SPA는 SaaS (Software as a Service) 플랫폼 또는 인터넷 서비스의 상황판 같은 대시보드 부분을 구축하고 기업의 데이터 기반 및 폼 기반 애플리케이션을 구축하기 위해 지난 몇 년 동안 많이 채택되어  왔으며, 추후에 개발될 웹 어플리케이션에서 우선적으로 고려될 것으로 예상되어 집니다.



그러면 Angular2(이하 Angular)로 개발하는 어플리케이션은 SPA로 개발해야 하는 건가요?
 
처음 Angular2를 접하게 되면 당연히 SPA로 개발 된다고 생각할수 있지만, 다르게 구축할 수도 있습니다.



SPA는 단순하게 다음과 같이 정의해 볼 수 있습니다.

1개의 페이지만 있는 어플리케이션

실제 SPA 확인해보고 싶으시면 남도패스 사이트(https://m.namdopass.co.kr)를  방문해보면 알수 있습니다.

하단의 홈/지역별/로그인/남도패스 각각 메뉴를 이동해 보면 실제 하나의 페이지에서 내용만 바뀌는 것을 확인할 수 있습니다.

웹사이트를 둘러보기를 시작하면 페이지가 완전히 다시 로드되지 않는다는 것을 알 수 있습니다. 화면 전환 시마다 REST API 서버를 통해 데이터를 바인딩하고 있습니다.

그럼 SPA 구축 할 때의 장점은 무엇이며 어떻게 작동하는지 살펴보면

남도패스 사이트(https://m.namdopass.co.kr) 첫화면을 소스보기 해보면



다운로드되는 페이지는 첫 번째 요청입니다. 즉, 애플리케이션의 문자 그대로 단일 페이지입니다.
한 가지만 주목하면 이 페이지는 거의 비어 있으며 태그를 제외하고는  많은 것이 없습니다.
이 소스는 실제 Amazon S3 버킷의 정적 호스팅을 통해 전송됩니다.

단일 페이지 응용 프로그램은 기존의 서버 측 렌더링 응용 프로그램과 비교할 때 매우 간단하게 배포 할 수 있습니다. 실제로는 CSS bundle과 Javascript 번들이 포함 된 index.html 파일이 하나뿐입니다.

이  정적 파일들은 은 Apache, Nginx, Amazon S3 또는 Firebase Hosting과 같은 정적 컨텐츠 서버에 업로드 할 수 있습니다.

또한, 애플리케이션은 데이터를 얻기 위해  Node, Java 또는 PHP와는 완전히 다른 기술로 구축 할 수있는 별도의 BackEnd 서버를 호출해야 합니다.

실제로 Node에서 REST API 또는 다른 유형의 BackEnd 서버를 개발하는 경우 Typescript로도 빌드 할 수 있으므로 서버와 클라이언트 모두에서 동일한 언어를 사용할 수 있고 심지어 소스를 공유할 수도 있습니다.




단일 페이지 응용 프로그램 및 사용자 경험

사용자 측면에서 일정한 전체 페이지 새로 고침 혹은 웹사이트에서 정보를 얻기 위해 앞뒤로 왔다갔다 하는 것은 과도한 네트워크 트래픽을 유도하고 편이성 마저 떨어집니다. 

단일 페이지 어플리케이션에서 근본적으로 다른 아키텍처 접근 방식을 사용하여이 문제를 해결했습니다.초기 페이지로드 후에 SPA에서 네트워크를 통해 더 이상 HTML이 전송되지 않습니다. 대신 JSON, XML  같은 데이터 만 서버에서 요청되거나 서버로 전송됩니다.

SPA가 실행되는 동안 데이터 만 유선을 통해 전송되므로 HTML을 지속적으로 보내는 것보다 시간과 대역폭이 훨씬 적습니다. 일반적으로 SPA에서 네트워크를 통과하는 페이로드 유형을 살펴 보겠습니다.

예를 들어, 남도패스에서 지역별 코스를 클릭하면 네트워크를 통해 HTML이 전송되지 않습니다. 대신 모든 코스 정보를 JSON 형태로 비동기 요청만 주고 받습니다.

 


HTML 버전의 데이터는 모든 여는 태그와 닫는 태그로 인해 일반 JSON 객체와 비교할 때 훨씬 더 크기가 더 크며, 비슷한 페이지를 계속로드하는 경우에는 많은 HTML이 중복됩니다.

예를 들어, 페이지의 머리말과 꼬리말 같은 것들은 끊임없이 브라우저로 전송되지만 실제로 변경되지는 않았습니다.
 
단일 페이지 응용 프로그램의 두 번째 큰 장점 인 적은 페이지 전체 재로드로 인한 사용자 경험 향상과 더 적은 대역폭이 필요하기 때문에 전반적인 성능 향상이 있습니다.




항상 SPA를 사용하지 않는 이유

SPA에 많은 장점이있는 경우 공용 인터넷에서 더 큰 규모로 채택되지 않은 이유는 무엇입니까? 그럴만한 이유가 있습니다.

비교적 최근까지도 Google과 같은 검색 엔진은 단일 페이지 응용 프로그램을 올바르게 색인화하는 데 어려움을 겪었습니다. 또한 과거에는 더 이상 사용되지 않는 Ajax 크롤링 스킴을 사용하는 몇 가지 권장 사항이있었습니다. 그렇다면 이제 Google은 Ajax를 완벽하게 렌더링 할 수 있습니까?

공식 발표에서 우리는 이제 Google 검색이 일반적으로 Ajax를 크롤링 할 수 있다는 정보를 가지고 있지만 아직 완전히 수행 할 수 없다는 일부 보고서가 있습니다.




검색 엔진 친화적인 SPA

SPA의 성능과 사용자 경험을 가질 수 있지만, 검색 엔진 최적화*(SEO)에는 어려움이 있습니다.

이를 해결하기 위해 Angular Universal 의 사전 렌더링 엔진을 사용할 수 있습니다.


*  Angular Universal : https://universal.angular.io/


(주요 기능)

• 백엔드에서 애플리케이션을 미리 렌더링한다.
• Angular와 함께 브라우저에 HTML을 제공
• 클라이언트 측에 Angular bootstrap을 설치하고 페이지를 SPA

* 검색 엔진 최적화 (영어: search engine optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.



  
앞으로 SPA는 더 많이 보일것입니다.

아마존의 SEO 친화적인 SPA버전을 생각해 보면, 아마존  SPA는 각 페이지를 다시로드 할 때마다 새로 고침 하지 않고 훨씬 향상된 성능과 사용자 경험을 제공할 수 있습니다. 고객이 사이트에 머문 시간 동안 SPA 는 긍정적인 평가를 받을 수 있습니다.SEO 친화적이고 데이터 사용이 작은 SPA의 기술적 장점은 웹보다는 모바일에서 더 중요합니다. 이러한 유형의 SEO 친화적 SPA 애플리케이션은 앞으로도  인터넷에서 많이 보급 될 것으로 기대됩니다.




SPA 작동 방식
SPA 어프리케이션은 실제 서버에서 HTML을 거의 로드하지 않고 어플리케이션 시작시에 데이터 만 네트워크를 통해 전달됩니다.

오늘날의 공용 인터넷의 대다수인 전통적인 웹 어플리케이션에서 데이터를 HTML 변환 (또는 렌더링)하는 것은 서버에서 수행됩니다.반면에 단일 페이지 응용 프로그램은 다른 방식으로 이를 수행합니다.응용 프로그램 시작 후 SPA에서 데이터 - HTML 변환 프로세스가 서버에서 클라이언트로 이동되었습니다. SPA에는 브라우저에서 실행되는 템플릿 엔진과 동일한 기능이 있습니다.



정리 - SPA 장점과 단점

(장점)

1. 손쉬운 운영 배포(Production Devployment)
2. 사용자 친화적( 빠른 반응성, 화면전환 에니메이션 등 )
3. 서버 요청이 적음( REST API를 통한 데이터 송수신 )

 

(단점)

1. 검색 엔진 최적화*(SEO)에는 어려움이 있습니다.
2. 초기 구동에 시간이 걸림

 



* 위의 내용은 다음 사이트 기반으로 작성하였습니다.

http://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/

https://www.slideshare.net/sixmen97/singlepage-applicationhttps://www.slideshare.net/sixmen97/singlepage-application