왜 BrowserRouter 일까?

HashRouter 와 BrowserRouter 의 차이와 어떤 걸 써야 하는지 알아보자
Feb 13, 2024
왜 BrowserRouter 일까?

결론 부터 말하자면 필수불가결한 상황이 아니라면 BrowserRouter 를 사용하는게 좋다.

HashRouter 와 BrowserRouter 의 차이

HashRouter

BrowserRouter

  • 주소가 정상적으로 작성된다. ex) baseurl.com/signup/info1

그러면 공식문서에서는 어떤 라우터를 추천할까?

위와 같이 강력하게 HashRouter를 사용하지 말라고 한다.
그러면 왜 사용하지 말라고 하는 것일까?

Next.js 로 프론트엔드와 백엔드를 한꺼번에 개발한다고 생각해보자.
클라이언트가( 브라우저 )서버 요청 시 baseUrl/#/user/signup 라는 주소로 Next.js서버로 요청을 보내게 된다.
일반적으로 클라이언트와 서버 사이에는 nginx 같은 reversy proxy서버를 두게 된다.
이런 reversy proxy 서버는 대부분의 경우 rfc 3986 등에서 명시하고 있는 URI-identifier의 역할을 따르도록 구현되어있다.
즉 해쉬 뒤의 부분을 제거하는 기능이 포함되어있을 수도 있기 때문에 baseUrl/# 뒤가 잘려서 서버에서 정상적인 URI 값을 받을 수 없게 된다.

이러한 이유로 서버로 url을 보내지 않는 상황에서 hashRouter가 사용될 수 있다고 다른 블로그에서 언급 하고 있는 것이다. ( 물론 위처럼 이유가 적혀있는 글은 본 적이 없다. )

HashRouter와 BrowserRouter에 대해 공부하며 어떤 차이가 있는지 정말 많은 고민을 했는데 친한 백엔드 개발자분과 한 시간 가량 대화를 하며 위와 같은 결과를 도출할 수 있었다.

Share article

석우의 개발블로그