SPA와 Route

SPA란?

Single Page Application의 약자. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻
전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있음. 링크 등을 통해 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 함.(서버사이드 렌더링)
요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고 불필요한 트래픽도 낭비되었음
그래서 요즘은 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줌.(클라이언트사이드 렌더링)

초기 구동 속도 : SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. 하지만 SPA는 웹페이지보다는 애플리케이션에 적합한 기술이므로 트래픽의 감소와 속도, 사용성, 반응성의 향상 등의 장점을 생각한다면 결정적인 단점이라고 할 수는 없다.
SEO(검색엔진 최적화) 문제 : SPA는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다. 따라서 SEO는 언제나 단점으로 부각되어 왔던 이슈이다. 하지만 SPA는 정보의 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 볼 수 없다. Angular 또는 React 등의 SPA 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응이 가능하다. 크롤러는 javascript 를 실행시키지 않기 때문에 hash 방식으로 만들어진 콘텐츠를 수집할 수 없다

Hash 방식은 URI 의 fragment identifier (예: #home )의 고유기능인 앵커(anchor) 를 사용함. fragment identifier는 URI 에서 # 으로 시작하는 문자열인데 hash 또는 hash mark 라고 불린다.

<a href="#home">HOME</a>

href 어트리뷰트에 hash 를 사용한다. HOME 을 누르게 되면 hash 가 추가된 URI가 표시됨. hash 가 추가되면 URL 이 동일한 상태에서 URI 만 바뀌므로 서버에 어떤 요청도 하지않음(hash가 변경되어도 요청이 보내지지 않으므로 페이지의 새로고침이 발생하지 않음)
hash 는 페이지가 새로고침이 되지않지만 논리적으로 페이지를 분리함. 그렇기 때문에 히스토리 관리가 되는 것임.
기존의 AJAX 방식에서 히스토리 관리가 안됐다면 hash 방식은 히스토리 관리가 된다!