BrowserRouter과 HashRouter의 차이

SPA(Single Page Application)를 개발한 경험이 있으실 겁니다.

페이지 이동 시, 리액트 라우터(React Router)를 사용해 라우팅을 구현하는 개발을 하던 도중, 라우터의 기능인 BrowserRouter와 HashRouter가 존재하더군요!

그 두 가지는 무엇이며, 어떤 기능을 제공하는지 알아보고자 합니다.

 

 

1. BrowserRouter

BrowserRouter 공식 홈페이지 바로가기

BrowserRouter는 HTML5의 History API를 사용하여, URL을 관리합니다.

pushState, replaceState, popState 같은 이벤트를 사용합니다.

또한, https://test.com/about 같은 클린한 URL을 제공하며, SPA에서 서버 사이드와 클라이언트 사이드 라우팅을 통합할 수 있도록 도와줍니다.

클린한 URL로 인해, 검색 엔진이 URL을 더 잘 인식하고 인덱싱할 수 있습니다.

 

하지만, 모든 URL 요청을 애플리케이션의 진입점으로 리디렉션하도록 서버를 설정해야 합니다.

※ 리디렉션(Redirection)이란? 웹 서버가 클라이언트(브라우저)의 요청을 받아서 원래 요청된 URL이 아닌, 다른 URL로 이동하도록 지시하는 과정

 

2. HashRouter

HasgRouter 공식 홈페이지 바로가기

HashRouter는 https://test.com/#/about 같은 해시(#)를 포함한 URL을 사용합니다.

해시 뒤의 경로는 서버에 전송되지 않으므로, 클라이언트에서만 경로를 관리하기에 따로 서버 설정이 필요 없습니다.

그러기에 클라이언트 사이드에서만 동작합니다.

또한, 모든 브라우저에서 호환됩니다. 특히, 오래된 브라우저에서도 문제없이 동작합니다.

 

하지만, 검색 엔진이 해시 뒤의 내용을 인식하지 못하므로 SEO에는 친화적입니다.

 

3. 비교 요약

특징	BrowserRouter	HashRouter
URL 형식	https://test.com/about	https://text.com/#about
라우팅 방식	HTML5 History API	URL 해시(#) 사용
서버 설정	필요	불필요
SEO	친화적	비친화적
호환성	최신 브라우저에서 주로 사용	모든 브라우저에서 호환
페이지 리로드	서버 설정 필요	불필요
사용 시나리오	SEO가 중요한 SPA	간단한 SPA, 서버 설정 불가능 시

 

4. 정리하며

지금까지 BrowserRouter과 HashRouter의 차이에 대해 알아보았습니다.

각각의 라우터는 애플리케이션의 요구 사항과 환경에 따라 적절하게 선택해야 할 것 같아요!

 

참고

BrowserRouter vs HashRouter ?