SPA(Single Page Application)

SPA란 Single Page Application의 약자

기존 웹 서비스(서버사이드렌더링 방식 사용)는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식. ink tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로 비효율적.

SPA(클라이언트사이드렌더링 방식 사용)는 처음에 하나의 빈 페이지만 서버측에서 제공하고, View에 대해서는 클라이언트에서 자바스크립트를 통해 렌더링 하는 방식이다. 즉, 브라우저에 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하고 이후에는 특정 부분만 Ajax를 통해 데이터(JSON, XML)를 바인딩한다. 또한 페이지를 이동할 때마다 주소창의 주소가 달라지는데, 실제 해당주소로 이동하는 것이 아니고 해당 페이지 내용을 렌더하고 브라우저의 주소창에 텍스트를 바꾸어서 표시하는 것 뿐이다. 주소를 실제로 입력하는 경우에도 사실은 입력한 주소에 해당하는 정보를 읽어와서 표시하는 것이지 해당 페이지가 요청되는 것은 아니다. ( * 라우팅 : 주소에 따라 다른 뷰를 보여주는 것)

메뉴바로 예를 들면, 로그인 후 달라지는 메뉴구성도 사실 새로운 메뉴를 받아오는 것이 아니라 처음에 모든 메뉴를 받아와서 로그인, 비로그인 상태에 따라 다른 메뉴를 보여주는 식.

* 서버사이드렌더링(SSR) : 먹고 싶은 것이 있을 때마다 슈퍼마켓에 가는것

* 클라이언트사이드렌더링(CSR) :  슈퍼마켓에 한 번 방문하고 좀 더 시간을 들여 꽤 오랜 기간동안 먹을 음식을 구매한다. 그런 다음, 먹고 싶은 것이 있을 때마다 슈퍼마켓에 가지 않고 냉장고에서 찾는다.

SPA 장점 

1. 사용자 친화적(빠른 반응성, 화면전환 애니메이션 등) => 클라이언트 렌더링, 라우터 방식

2. 서버 요청이 적음(상대적으로 적은 전체 트래픽 양) =>REST API를 통한 데이터 송수신이기 때문 

3. 손쉬운 운영 배포 =>jsp 파일 없이 index.html 하나에서 js, css 등 리소스 파일들과 모듈들을 로드하기 때문

4. 손쉬운 개발과 유지 그리고 협업 => 모듈화, 컴포넌트화

SPA 단점

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

2. SEO(검색엔진 최적화) 어려움 

=> SPA는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다. 

View를 생성하는데 자바스크립트가 필요하다. 하지만 대부분의 웹 크롤러 봇들은 자바스크립트 파일을 실행시키지 못한다. 따라서 클라이언트 렌더링 방식 페이지를 빈 페이지로인식하기 되어, 웹 크롤러들은 내용을 알 수 없고 제대로 된 데이터를 수집할 수 없다. 

개인적인 생각으로,  SEO가 필요한 페이지는 SSR을 사용하면 될 것 같다.

3. 보안 문제 => SSR은 사용자 정보를 서버 측에서 세션으로 관리 / CSR은 쿠키에 저장

   => 핵심 로직이 자바스크립트로 구현된다. 기존에는 비즈니스 로직이 서버에서 수행되어 최종 결과만을 HTML로 전달 받았는데, SPA는 필요한 데이터만 전달받고 많은 비즈니스 기능을 클라이언트에서 수행하기 때문에 핵심 로직이 노출된다.

전통적인 페이지 vs 단일 페이지 어플리케이션 비교

Reference : https://en.wikipedia.org/wiki/Single-page_application

Reference : http://devstory.ibksplatform.com/2017/08/spasigle-page-applications.html