해시라우터, 브라우저 라우터

steyu·2022년 10월 14일
0

해시라우터

  • 주소에 #가 붙는다. # 뒤에 path가 온다 /#/detail/
  • 검색엔진이 읽지 못한다.
  • 별도로 서버 설정을 안해도, 리다이렉션, 새로고침시 문제가 없다.

브라우저 라우터

  • 별도로 서버설정을 하지 않으면 새로고침이나 올바르지 않은 URL 접근을 리디렉션 할 때, 404에러가 난다
  • History API를 사용한다.

SPA는 기본적으로 하나의 entry point를 가진다. 도메인에 접근하면 클라이언트는 서버로부터 index.html과 JS, CSS 파일 등을 전달받고 이를 실행시킨다. 기본적으로 한번의 페이지 로드만이 존재하고 이후부터는 History API에 의해 렌더링 될 뿐이다.

Brower Router를 사용할 때 도메인의 루트 주소에서의 새로고침은 전혀 문제되지 않지만 다른 path에서의 새로고침이나 리디렉션이 불가능한 이유는 바로 여기에 있다. 우리가 다른 path에서 새로고침을 하게 되면 브라우저는 도메인 주소를 보고 우리의 서버를 찾아간 뒤 path를 보고 path 명과 같은 디렉토리를 찾는다. 하지만 우리의 앱은 서버사이드 렌더링이 아니기에 path명과 같은 폴더를 가지지 않을 뿐더러 그 안에 index.html이 존재하지도 않는다. 결국, 브라우저는 렌더링에 필요한 파일을 서버로부터 찾지 못했기 때문에 404 에러를 띄운다

해시라우터는 새로고침 문제가 없는 이유는?

"#"로 도메인 entry point와 path을 구분시켜서, 새로고침과 리디렉션을 해도 올바르게 요청할 수 있다.
브라우저가 서버에 요청을 보낼 때, # 이전의 도메인 주소로 요청을 보내기 때문이다. Hash Router는 # 이후에 path가 오도록 만든다

https://yung-developer.tistory.com/106

0개의 댓글