SPA(Single Page Application)
SPA는 기본적으로 단일 페이지로 구성되며 CSR(ClinetSideRendering) 방식이다. 기존의 SSR(ServerSideRendering)과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.
CSR(ServerSideRendering) 특징
기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 다운로드한다.
이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고,
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사하다.
Routing
URL에 대한 요청이 들어왔을 때 해당 요청을 처리하는 방법을 결정하는 프로세스이다. 즉, 출발지에서 목적지까지의 경로를 결정하는 기능이다.
애플리케이션의 Routing은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다.
Routing 방식은 link tag, ajax, hash, pjax 방식이 있다.
link tag 방식
동작방식
<a href="/service.html">Service</a>링크를 클릭하게 되면 리소스의 경로가 URL의 path에 저장이되고, 서버는 해당 html을 클라이언트에 응답한다.
특징
이 방식은 자바스크립트의 도움 없이 응답받은 html만으로 렌더링이 가능하며 각 페이지마다 고유의 URL이 존재하므로 history 관리 및 SEO 대응에 아무런 문제가 없다.
하지만 요청마다 중복된 리소스를 응답받아야 하며 전체 페이지를 다시 렌더링하는 과정에서 새로고침이 발생하여 사용성이 좋지 않은 단점이 있다.
ajax 방식
link tag 방식의 새로고침하는 단점을 보완하기 위해 등장한 것이 ajax이다.
ajax는 자바스크립트를 이용해서 비동기적(asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식이다.
서버로부터 웹페이지가 응답되면 화면 전체를 새롭게 렌더링해야 하는데 페이지 일부만 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 ajax이다.
동작방식
<a id="service">Service</a>href 를 사용하지 않는다.
AJAX 를 통해 서버에 필요한 리소스를 요청하고 응답을 하면 html 내의 내용을 렌더링한다.
특징
필요한 부분만 렌더링을 하므로 기존의 방식보다 속도가 빠르다
ajax 요청은 주소창의 URL을 변경시키지 않아 history 관리를 할 수 없다.
동일한 하나의 URL로 동작하는 ajax 방식은 SEO 이슈가 있다.
Hash 방식
ajax의 history 관리가 되지않는 단점을 보완한 방법이다.
Hash 방식은 URI의 fragment identifier(#service)의 고유 기능인 앵커(anchor)를 사용한다.
동작방식
<a href="#service">Service</a>
href 어트리뷰트에 hash를 사용하고 있다. 즉, 내비게이션이 클릭되면 hash가 추가된 URI가 주소창에 표시된다.
단, URL이 동일한 상태에서 hash만 변경되면 브라우저는 서버에 어떠한 요청도 하지 않는다.
즉, URL의 hash는 변경되어도 서버에 새로운 요청을 보내지 않으며 따라서 페이지가 갱신되지 않는다.
특징
hash 방식은 서버에 새로운 요청을 보내지 않으며 따라서 페이지가 갱신되지 않는다.(hash 가 변경되어도 요청이 보내지지않으므로 페이지의 새로고침이 발생하지 않음)
페이지마다 고유의 논리적 URL이 존재하므로 history 관리에 아무런 문제가 없다.
크롤러는 javascript 를 실행시키지 않기 때문에 hash 방식으로 만들어진 콘텐츠를 수집할 수 없어 SEO 이슈가 있다.
Pjax 방식
hash 방식의 가장 큰 단점은 SEO 이슈이다. 이를 보완한 방법이 HTML5의 History API인 pushState와 popstate 이벤트를 사용한 pjax(pushState + ajax) 방식이다.
동작방식
<a href="/service">Service</a>
href 방식에 path 를 사용하고있다. service 을 클릭하면 path 가 추가된 URI 가 서버로 요청된다.
그리고 이벤트를 캐치 한 후 preventDefault 를 사용해 서버로의 요청을 방지한다.
이후에 href 속성에 path 를 사용해 AJAX 요청을 한다.
ajax 요청은 브라우저 주소창의 URL을 변경시키지 않아 history 관리가 불가능하다. 이때 사용하는 것이 pushState 메서드이다.
pushState 메서드는 주소창의 URL을 변경하고 URL을 history entry로 추가하지만 서버로 HTTP 요청을 하지는 않는다.
특징
PJAX 는 페이지마다 고유의 URL 이 존재하기 때문에 SEO 이슈를 피할 수 있다.
