SPA(single page application)

SPA(single page application)

 

싱글 페이지 어플리케이션은 서버로부터 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

SPA에서 html, js, css등 필요한 모든 코드는 하나의 페이지로 불러오거나 사용자의 요청이 있는 경우 적절한 자원들을 동적으로 불러들여서 문서에 추가하면서 동작한다.

 

전통적인 웹 애플리케이션 방식

새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지가 새로고침되면서 다시 렌더링되는 방식으로 사용성이 좋지 않으며 변경이 없는 부분을 포함한 전체 페이지가 갱신되므로 비효율적이다.

 

SPA방식

페이지의 새로고침 없이 변경이 필요한 부분만 재렌더링되어 동작한다.

 

SPA의 특징

라우팅(routing)

라우팅은 출발지에서 목적지까지의 경로를 결정하는 기능이다. spa에서 라우팅은 사용자가 작업을 수행하기 위해 어떤 화면에서 다른 화면으로 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 사용자가 요청한 url 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위한 데이터를 취득하기 위해 서버에 필요 데이터를 요청하고 화면을 전환하는 일련의 행위를 말한다.

이러한 라우팅을 백단이 아닌 브라우저단에서 구현하는 것이 spa의 특징이다. 즉 요청 uri에 따라 브라우저에서 DOM을 변경하는 방식이다. 따라서 요청 경로에 따라 동적으로 렌더링되도록 만들면 라우팅에 따라 다른 화면을 구현할 수 있는 것이다.

 

컴포넌트(component)

컴포넌트들이 모여 한 페이지를 구성하고, 특정 부분만 데이터를 바인딩하는 개념이다. 예를 들면, 하나의 index.html파일에서 js, css 등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 것이다.

 

 

SPA의 장점

ㅇ 단일 페이지로 구성되어 SSR(server side rendering)에 비해 배포가 간단하며 네이티브 앱과 유사한 ux를 제공한다.(새로고침 없이 변경되는 부분만 재렌더링)

ㅇ 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.

ㅇ 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽이 감소한다.

 

SPA의 단점

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

ㅇ SPA는 SSR방식이 아닌 JS기반 비동기모델(CSR, 클라이언트 사이드 렌더링)이기 때문에 검색엔진최적화(Search Engine Optimization, SEO)이슈가 있다.

*seo발생 이유 :

1. 검색엔진로봇이 사이트를 돌아다니며 크롤링

2. 읽은 파일을 검색엔진에 노출

-> 그런데 필요한 부분만 js로 바꿔주는 페이지는 검색엔진봇이 읽을 수 없다.

SSR은 서버에서 렌더링해서 브라우저에 뿌린 뒤에 동적인요소(js)를 실행한다. 따라서 브라우저에 뿌리는 순간의 파일을 검색봇이 읽을 수 있다.

반면에 CSR은 모든 요소를 받아와서 화면을 그려낸 뒤 요청에 따라 변화한다.(초기 로딩 느리고 이후에 빠름)

 

Pre-rendering(사전 렌더링) : 서버에서 사람인지 검색 봇인지 판단하여 검색봇에게는 검색봇이 읽을 수 있도록 렌더링 된 페이지를 전달하는 것.

 

History API :

클라이언트 측 라우팅 방식을 사용하는 단일 페이지 애플리케이션의 경우

history api를 사용하여 웹 앱의 다양한 보기간 라우팅을 구현합니다. -구글 자바스크립트 검색 엔진 최적화 문서 중

즉, CSR을 사용하는 SPA의 경우 History API를 사용하여 경로지정을 해야한다는 말이다.

CSR방식의 SPA는 하나의 페이지에서 동적으로 요소를 호출하기 때문에 URL이 바뀌지 않기 때문에 검색봇이 경로를 읽을 수 없다. History API는 새로고침 없이 페이지를 로딩하며 URL이 바뀌게 설정이 가능하다.(URL이 바뀐 상황에서 새로고침을 하면 없는 페이지이기 때문에 이 부분은 SSR로 해결해야한다.)