https://router.vuejs.kr/guide/essentials/history-mode 뷰 공식 문서를 참고하여 작성하였습니다.
해시 모드
해시 히스토리 모드는 createWebHashHistory()로 생성됩니다
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})이 모드는 실제 URL 앞에 해시 문자(#)를 사용합니다. URL의 이 부분은 서버로 전송되지 않기 때문에 서버 수준에서 특별한 처리가 필요하지 않습니다. 그러나 SEO(Search Engine Optimization)에 부정적인 영향을 미칩니다.
왜 해시 모드가 SEO에 부정적일까?
createWebHashHistory()는 URL의 해시(#) 부분을 이용하여 클라이언트 측에서 라우팅을 처리합니다. 예를 들어, URL이 http://example.com/#/home라면, # 이후의 /home 부분은 클라이언트(JavaScript)가 해석하고, 서버에는 http://example.com만 요청됩니다.
검색 엔진의 크롤러는 기본적으로 서버에서 HTML 문서를 요청하여 콘텐츠를 가져옵니다. 하지만 해시 기반 라우팅에서는 # 이후의 경로는 서버에 전달되지 않기 때문에, 크롤러는 기본적으로 http://example.com의 페이지만 읽고, # 뒤에 있는 경로 정보는 무시합니다.
결과적으로 크롤러는 URL의 # 이후 내용을 무시하기 때문에, 페이지의 실제 콘텐츠가 제대로 인덱싱되지 않습니다.
HTML5 모드
HTML5 모드는 createWebHistory()로 생성되며, 권장되는 모드입니다. createWebHistory()는 SPA에서 서버 설정을 지원할 수 있을 때 사용합니다. SEO를 고려하거나 URL이 중요한 경우, 이 방식을 사용해 클라이언트 라우팅을 보다 깔끔하게 유지할 수 있습니다.
메모리 모드
메모리 히스토리 모드는 브라우저 환경을 전제로 하지 않기 때문에 URL과 상호 작용하지 않으며 초기 탐색을 자동으로 트리거하지도 않습니다. 따라서 Node 환경 및 SSR에 적합합니다. createMemoryHistory()로 생성되며, app.use(router)를 호출한 후 초기 탐색을 수동으로 push 해야 합니다.
브라우저의 URL을 직접 변경하지 않고, 메모리에서만 URL 히스토리를 유지합니다. 즉, 히스토리가 메모리에 저장되며, 페이지를 새로고침하거나 URL을 수동으로 변경할 수 없습니다.
권장되지는 않지만, 이 모드를 브라우저 애플리케이션 내에서 사용할 수는 있습니다. 하지만 히스토리가 없을 것이라는 점을 주의해야 합니다. 이것은 뒤로가기 또는 앞으로가기가 불가능하다는 것을 의미합니다.
