HashRouter의 #는 어떤 역할을 하는가

HashRouter의 #는 어떤 역할을 할까요.

 

1. 해시기반 라우팅

 

클라이언트 사이드 라우팅

HashRouter는 URL의 해시 # 부분을 사용하여 클라이언트 측 라우팅을 구현합니다.

 

URL 구조

일반적으로 URL은 http://example.com/#/home과  같은 형태를 갖습니다.

 

서버 요청 회피

해시 프래그먼트 ( #이후의 부분을 말합니다 ) 는 http 요청시 서버로 전달되지 않습니다. 따라서 페이지를 새로고침해도 서버측에서 404오류가 발생하지 않습니다.

 

이 부분이 중요하니 좀 더 자세하게 살펴볼게요.

 

해시 프레그먼트 #는 어떻게 서버 요청을 회피하고 404 오류를 방지하는가! 

 

일단 해시 프래그먼트는 브라우저에서만 사용해요. 브라우저는 이 부분을 사용해서 페이지 내의 특정 위치로 스크롤하거나, 자바스크립트를 통해서 특정 동작을 수행합니다. 

서버는 HTTP로 URL에다가 페이지를 요청할 때, 해시 프래그먼트 부분은 안받아요. 다시 보면

http://example.com/page/#/section이 있다고 쳐볼게요. 서버는 example.com/page 까지만 받습니다. #/section은 안받아요

 

그러면 페이지를 새로고침 했을 때 어떻게 동작하는지 볼게요

리액트의 HashRouter를 사용했다고 쳐봅시다

 

1. 리액트의 HashRouter를 사용하면 URL이 http://example.com/#/home 과 같이 됩니다.

2. 새로고침을 했습니다.

3. 그러면 사용자가 이 페이지에서 새로고침을 하면, 브라우저는 서버의 http://example.com/으로 get요청을 보냅니다.

4. 해시 프래그먼트 부분인 #/home 부분은 서버로 전달되지 않아요. 브라우저에 남아있습니다.

5. 그럼 서버는 http://example.com/ 요청에 대해서 기본적인 index.html 파일을 반환합니다.

6. 브라우저는 서버에서 받은 index.html을 렌더링하고, 자바스크립트 어플리케이션 ( 리액트 앱 ) 이 실행됩니다.

7. 이 때 리액트의 HashRouter는 url의 해시 프래그먼트 #/home 을 읽어서 현재 어떤 페이지를 보여줘야 하는지 판단합니다.

8. 결과적으로 사용자는 새로고침 후에도 이전과 동일한 페이지를 볼 수 있습니다.

 

 

2. 브라우저의 처리방식

 

프래그먼트 식별자

브라우저는 # 이후의 내용을 프래그먼트 식별자로 인식하며, 이는 페이지 내의 특정 위치로 이동하는데 사용됩니다.

 

자바스크립트와의 상호작용

리액트 라우터는 이 해시 값을 읽어 현재 어떤 경로에 있는지 파악하고, 그에 따라 적절한 컴포넌트를 렌더링합니다.

 

 

3. 그럼 왜 검색엔진최적화 seo에 불리할까.

 

검색 엔진의 한계 때문이다. 

 

크롤링 제한

대부분의 검색엔진은 해시 프래그먼트 이후의 내용을 인덱싱하지 않습니다. 즉, #/home과 같은 경로의 컨텐츠는 검색 엔진에 의해서 무시될 수 있습니다.

 

컨텐츠 접근성 부족

검색 엔진은 자바스크립트를 실행하지 않거나, 제한적으로 실행하기 때문에 해시기반 라우팅으로 제공되는 컨텐츠들을 제대로 수집하지 못합니다.

 

 

URL의 구조적 문제이다.

 

비직관적인 URL 

해시 # 가 포함된 URL은 검색엔진에도 의미가 모호하지만 사람이 봐도 의미가 모호합니다.

 

메타데이터 손실

해시 프래그먼트는 서버로 전달되지 않으므로, 서버측에서 메타태그나 OG태그를 동적으로 생성할 수 없습니다.

 

 

소셜 미디어 및 공유의 어려움

 

미리보기 제한

소셜 미디어에서 링크를 공유할 때, 해시 기반 URL은 페이지의 미리보기나 썸네일을 제대로 표시하지 못할 수 있습니다.

 

링크 신뢰도 감소

사용자들은 복잡하거나, 비정상적인 URL 구조를 신뢰하지 않을 수 있습니다. 마치 피싱 URL 을 우리가 접속안하는 것처럼