라우팅 방법에는 4가지가 있다.
전통적인 link 태그의 기능을 이용한 방식.
Ajax를 통한 방식.
Hash를 이용한 방식.
Pjax를 이용한 방식.
1. 전통적인 link 태그 의 기능을 이용한 방식
이 방식은 자바스크립트의 개입이 필요없이 앵커 태그를 클릭으로 href의 값이 주소창의 URL에 추가되어 변경되며, 서버에 요청하여 완전한 리소스(html, css, js)를 응답을 받는데 이것을 서버사이드렌더링이라고 부른다.
URL이 변경되어 히스토리가 축적이 되고, 서버에서 완전한 리소스를 받아서 렌더링 하기때문에 SEO에서도 강점을 보인다. 하지만 전체 리소스를 매번 서버에서 다시 받아와 렌더링 하기 때문에 클라이언트와 서버간의 딜레이가 생기고, 또한 새로고침으로 인해 사용자경험이 좋지 않다.
2. ajax를 이용한 방식
Ajax는 자바스크립트를 사용하여 서버와 비동기적으로 통신을 하는 방식이다.
초기 정적 리소스들을 미리 받아 온 뒤, 특정 트리거나 유저의 인터랙션이 발생한 시점에서 비동기적으로 해당 페이지에 필요한 리소스만을 요청하게 되는 방식이다.
그렇기 때문에 새로고침 현상이 없다. 이는 사용자에게 네이티브 애플리케이션과 같은 경험을 제공할 수 있게 한다. 하지만 주소가 바뀌지 않고 하나의 페이지와 주소만을 사용하기 때문에 히스토리가 축적이 되지 않고 새로고침 시 첫화면으로 가게 된다. 그렇기 때문에 SEO에서 맹점을 보이게 된다.
3. hash를 이용한 방식
일반적인 ajax 방식은 주소창의 변화가 없기때문에 히스토리 축적이 되지 않는다. 그렇기 때문에 새로고침 시 처음 페이지로 가게 된다.
이를 보완한게 hash 방식이다. hash 방식은 앵커 태그의 href 속성의 값에 #을 붙혀 한 페이지의 섹션으로 이동하는 기술을 라우팅 기술에 접목한 것이다. 라우터를 클릭 할 때마다 각각 고유의 해쉬가 붙어서 주소가 바뀌기 때문에 히스토리에 축적이 되어 히스토리 메소드를 조작할 수 있다. 하지만 여전히 해쉬 방식은 크롤러가 정보를 수집할 수 없어서 SEO에서 맹점을 보인다. 구글에서는 해쉬뱅(#!)을 일반적인 URL로 변경하여 정보를 수집한다고 한다.
4. pjax를 이용한 방식
html5로 오게되면서 히스토리에 새로운 API를 사용할 수 있게 되었다.
pushState, replaceState, popState 이 3가지인데, 이것을 pjax라고 부른다.
pushState는 3개의 인자를 갖는다. 첫번째 인자는 담을 데이터 객체, 두번째 인자는 제목, 세번째 인자는 주소의 이름이다. pushState로 주소창의 주소를 바꾸고 히스토리를 축적하고, 해쉬를 사용하지 않기때문에 미관상(?)에도 좋다. 이렇게 축적한 히스토리를 가지고 popState를 활용하여 뒤로가기와 앞으로가기 버튼을 사용할 수 있다. replaceState는 이전 주소를 없애고, 바꿀 주소로 변경하는 것이기 때문에 히스토리를 축적하지 않는다.
pjax를 이용한 방식은 앵커 태그에 path를 기입하여 동작한다.
앵커 태그를 클릭할 시 태그로의 서버사이드 요청을 방지한 뒤 ajax방식으로 path를 전달하여 비동기적으로 응답받게 되기 때문에 ajax의 사용자 경험적인 이점과 hash의 히스토리 기능의 이점을 가지면서도, 해쉬(#)를 사용하지 않기때문에 SEO에서 강점을 보인다.
주의할 점은 3가지 있다.
- IE 10 이상의 브라우저에서만 지원을 한다.
- 라우터 이동 뒤 새로고침을 할 시 데이터가 표시되지 않기 때문에 이 부분은 서버사이드렌더링으로 해결 해야 한다.
- popState는 pushState와 같이 실행되지 않는다. pushState가 실행된 뒤 '뒤로가기'와 '앞으로가기'를 누를 때 실행 된다.
