client-side routing

라우팅

라우팅이란 사용자가 웹사이트의 여러 페이지로 이동하도록 해주는 프로세스를 말한다. 라우팅과 렌더링은 다르다. 특정 라우트에 대한 요청을 보낼 때마다 그 페이지를 렌더링하게 되지만, 모든 렌더링이 라우팅의 결과는 아니다.

 

Client-side routing

clinet-side routing은 자바스크립트에 의해서만 처리되는 라우팅이다. 웹 애플리케이션의 모든 내용을 한 페이지에서 동적으로 로드하고 표시하는 싱글 페이지 애플리케이션(SPA)은 클라이언트사이드 라우팅 방식으로 구현된다. 전체 페이지를 새롭게 렌더링하지 않기 때문에 부드러운 페이지 이동 경험을 제공할 수 있다.

 

client-side routing의 장점과 단점

장점

• 렌더링되는 데이터의 양이 적어 컴포넌트 간의 라우팅이 빠르게 처리된다.
• 컴포넌트를 전환할 때 애니메이션 및 전환을 쉽게 구현할 수 있다.

단점

• 초기 로딩 시에 전체 웹 사이트 또는 웹 앱을 로드해야 해서 시간이 오래 걸린다.
• SEO 면에서 불리하다
• 일반적으로 외부 라이브러리가 필요하다.

 

라우팅의 발전 과정

• Link 방식
  • 전통적인 라우팅 방식으로, Link 태그를 이용해 페이지를 전환한다.
  • 링크를 클릭하면 href 어트리뷰트의 값이 url의 path에 추가돼 주소창에 나타나고 해당 리소스를 서버에 요청한다.
  • 서버사이드 렌더링 방식으로 작동한다.
• AJAX 방식
  • AJAX란 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 말한다.
  • 전체 페이지를 새롭게 렌더링하지 않고 페이지의 일부만 갱신해 불필요한 리소스를 중복 요청하지 않게 해준다.
• Hash 방식
  • AJAX 방식으로 라우팅을 했을 때 history 관리가 되지 않는다는 장점을 보완한 방식이다.
  • hash(#)를 uri에 추가해 하위 주소를 추가함으로써 고유의 url을 부여하면서도 서버에는 아무런 요청도 하지 않는다.
  • 웹 크롤러가 hash 방식으로 만들어진 사이트의 데이터를 수집할 수 없어 SEO에 불리하다.
• PJAX 방식
  • history API의 pushState와 popstate를 활용해 라우팅을 한다.
  • hash 방식의 SEO 문제를 해결할 수 있다.

---

참고 자료

 

https://poiemaweb.com/js-spa

https://www.pluralsight.com/guides/pros-and-cons-of-client-side-routing-with-react