SPA(Single Page Application)를 개발한 경험이 있으실 겁니다.
페이지 이동 시, 리액트 라우터(React Router)를 사용해 라우팅을 구현하는 개발을 하던 도중, 라우터의 기능인 BrowserRouter와 HashRouter가 존재하더군요!
그 두 가지는 무엇이며, 어떤 기능을 제공하는지 알아보고자 합니다.
1. BrowserRouter
BrowserRouter는 HTML5의 History API를 사용하여, URL을 관리합니다.
pushState, replaceState, popState 같은 이벤트를 사용합니다.
또한, https://test.com/about같은 클린한 URL을 제공하며, SPA에서 서버 사이드와 클라이언트 사이드 라우팅을 통합할 수 있도록 도와줍니다.
클린한 URL로 인해, 검색 엔진이 URL을 더 잘 인식하고 인덱싱할 수 있습니다.
하지만, 모든 URL 요청을 애플리케이션의 진입점으로 리디렉션하도록 서버를 설정해야 합니다.
※ 리디렉션(Redirection)이란?
웹 서버가 클라이언트(브라우저)의 요청을 받아서 원래 요청된 URL이 아닌, 다른 URL로 이동하도록 지시하는 과정
2. HashRouter
BrowserRouter 공식 홈페이지 바로가기
HashRouter는 https://test.com/#/about 같은 해시(#)를 포함한 URL을 사용합니다.
해시 뒤의 경로는 서버에 전송되지 않으므로, 클라이언트에서만 경로를 관리하기에 따로 서버 설정이 필요 없습니다. 그러기에 클라이언트 사이드에서만 동작해요.
또한, 모든 브라우저에서 호환됩니다. 특히, 오래된 브라우저에서도 문제없이 동작합니다.
하지만, 검색 엔진이 해시 뒤의 내용을 인식하지 못하므로 SEO에는 비친화적입니다.
3. 비교 요약
| 특징 | BrowserRouter | HasgRouter |
|---|---|---|
| URL 형식 | https://test.com/about | https://text.com/#/about |
| 라우팅 방식 | HTML5 History API | URL 해시(#) 사용 |
| 서버 설정 | 필요 | 불필요 |
| SEO | 친화적 | 비친화적 |
| 호환성 | 최신 브라우저에서 주로 사용 | 모든 브라우저에서 호환 |
| 페이지 리로드 | 서버 설정 필요 | 불필요 |
| 사용 시나리오 | SEO가 중요한 SPA | 간단한 SPA, 서버 설정 불가능 시 |
4. 정리하며
지금까지 BrowserRouter과 HashRouter의 사이에 대해 알아보았습니다.
각각의 라우터는 애플리케이션의 요구 사항과 환경에 따라 적절하게 선택해야 할 것 같아요!
