개요
프로젝트를 진행하던 와중 page를 바꾸는 작업에서 Link와 router의 차이점이 궁금하여 정리해보았습니다.
Link?
Next.js의 Link태그는 Next.js에서 제공하는 컴포넌트 중 하나입니다.
HTML요소를 확장시켜 경로 간의 prefetching 및 클라이언트의 탐색을 제공하는 "React"구성요소입니다. - Next.js Docs
Link태그를 사용함에 있어서 몇가지 props들이 존재합니다.
href⭐️
href props는 Link태그를 사용할 때 필수로 사용해야합니다.
이유는 사용자 경험(UX)적인 측면과 SEO적인 측면에서 좋지 않기 때문입니다.
- href가 없다면 새 창으로 보기 (ctrl + click)이 작동하지 않습니다.
- href가 없다면 검색엔진이 indexing처리를 할 때 href속성을 읽어 indexing처리를 하지만 href가 없어 검색엔진이 추적을 할 수 없습니다.
위와같은 이유로 href props는 반드시 필요합니다.
replace
replace props는 기본값이 false입니다.
replace가 존재한다면 browser history에 현재 기록상태를 대체합니다.
prefetch
prefetch props가 존재한다면 href주소를 미리 읽어와 해당 페이지의 리소스들을 미리 받습니다.
이때 viewport안에서 존재하는 Link태그들의 데이터만 prefetching합니다.
기본값은 true인 상태입니다.
useRouter?
next.js에서 사용하는 router의 종류는 몇가지가 존재하는데 이번 포스팅에서는 useRouter에 대해서 설명해보겠습니다.
useRouter는 next.js에서 "함수형식"으로 routing을 해주는 Next.js가 제공하는 라이브러리입니다.
useRouter에서 사용되는 메서드를 알아보겠습니다.
- router.push(href) : href로 탐색을 실행하고, browser history에 쌓습니다.
- router.replace(href) : href로 탐색을 실행하지만 browser history에 쌓지는 않습니다.
- router.refresh(): 현재의 경로를 새로고침합니다. 서버에서 새로운 요청을 만들고, data요청 또한 다시 가져오고 서버의 구성요소들을 재렌더링합니다.
- router.prefetch(href) : href를 prefetching합니다.
- router.back() : browser history에서 이전 경로로 이동합니다.
- router.forward() : browser history에서 다음 페이지로 이동합니다.
Next.js에서는 특별한 이유가 없다면 Link를 사용하는 것을 추천하고있습니다.
Next.js가 13버전이 release하면서 app routing기능을 추구하고있습니다. 고로 app routing을 사용한다면 useRouter는 next/router가 아닌 next/navigation에서 import하여 사용하여야합니다.
정리
이번 기회에 router와 Link태그의 차이점을 알게되었고 이를 통하여 제 프로젝트에 어떤 방법이 더 적합한지 결론을 내릴 수 있었습니다. 앞으로도 여러 기술들이 만무하는 현대 개발사회에서 효율적이고 올바른 선택을 하기 위해서 이런 방향으로 공부를 해야겠다는 결론을 내리며 글을 마치겠습니다.
