Next.js에서 Router.push VS next/link

Next.js에서 페이지 이동은 useRouter 를 이용하거나, next/link의 Link 컴포넌트를 이용한다.

이 두가지 방식의 차이점은 무엇일까?

const router = useRouter()

const onClick = () => {
	router.push('...') // router.push
}

return (
<Link href='...'/> {/* Link 이용 */}
)

 

next/link 의 Link는 내부적으로 `<a/>` 태그를 생성한다.

따라서 useRouter push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있다.

여기서 말하는 직관적인 동작은 무엇일까?

 

위의 내 프로필을 클릭하면 나의 프로필 페이지로 이동은 하지만, 우 클릭시 이동과 관련된 액션을 찾아볼 수 없다.

 

 

하지만, 클릭하면 index페이지로 이동하는 헤더 우클릭시 링크와 관련된 내용을 찾아볼 수 있다.

 

이것이 직관적인 동작이 주는 차이점이다.

 

직관적인 동작을 보여주는 Link를 사용한다면 아래와 같은 장점이 있다.

 

1. SEO에 좋다. a 태그로 된 링크는 크롤링 봇이 이동할 수 있고 링크를 식별할 수 있다.

 

2. `data prefetch` 기능이 있다.

next/Link가 사용자의 화면에 보이면 해당 페이지의 번들파일을 서버에 요청해 미리 가져온다.

미리 가져온 번들을 통해 페이지 이동을 빠르게 할 수 있다.

---

해당내용은 커리어리의 Q&A 게시글을 참고로 작성한 게시글 입니다.