브라우저 라우팅과 해시 라우팅의 차이 (Browser Routing 과 Hash Routing 의 차이)

브라우저 라우터 (Browser Router)

• 모던 웹브라우저에서 제공하는 히스토리 API 를 활용하여 히스토리 스택을 조작한다.
  • 히스토리 스택에는 브라우저 탭이나 창에서 방문한 URL 이 들어있다.
• 해시 라우팅과 비교하면 해시(#)가 없는 깔끔한 URL 을 사용할 수 있다.

장점

• 깔끔한 URL: URL 이 깔끔해진다.
• SEO 친화적: URL 이 깔끔하여 SEO 에 친화적이다.
• SSR 지원: 서버가 미리 렌더링된 초기 페이지를 반환할 수 있어서 SEO 를 용이하게 하고 처음 방문하는 방문자의 로딩 시간을 개선한다.

단점

• 서버 구성: 서버에서 모든 요청을 index.html 로 라우팅되도록 해야 SPA 라우팅이 올바른 뷰를 렌더링 할 수 있다.
• 브라우저 호환성: 일부 구형 브라우저는 히스토리 API 를 지원하지 않을 수도 있다.

해시 라우터 (Hash Router)

• 해시(#)를 이용하여 경로를 만든다.
• 브라우저의 해시 변경 이벤트에 의존한다.

장점

• 단순성: 서버측 라우팅 구성이 필요 없다.
• 호환성: 히스토리 API 없이도 구형 브라우저를 포함한 거의 모든 브라우저에서 작동한다.

단점

• URL에 #이 붙음: UX 및 SEO 관점에서 덜 매력적이다.
• 클라이언트에 제약받음: 모든 라우팅 로직이 클라이언트 측에서 처리되므로 초기 로드 최적화나 SSR 에 적합하지 않을 수 있다.

결정에 중요한 포인트

• UX 중요성
  • URL 의 깔끔함
• 구형 브라우저 호환성
• 배포의 단순성