Router.push vs next/link 어떤 케이스에서 나누시나요?

Question

안녕하세요! 처음 질문 올려봅니다.

next.js에서 router.push와 next/link로 페이지를 이동할 수 있는데 차이가 있을까요?

페이지는 이동하지만 새로고침하고 싶지 않을 때 주로 사용하는데, 둘 다 사용해보니 같은 동작을 하는 것 같아서요. 제가 생각한게 맞을까요?

성원 · Answer

Next/Link를 사용하면 <a> 태그를 생성합니다 (모든 케이스는 아님). 따라서 Router.push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있습니다.

커리어리 사이트에서 오른쪽 상단 프로필을 클릭하면 프로필로 이동합니다. 하지만 우클릭을 했을 경우 클릭에 관한 이벤트는 나타나지 않습니다.

반면, 헤더에 있는 개발자 Q&A 버튼을 누르면 Q&A 리스트로 이동하고, 우클릭을 하면 새탭으로 열기등 링크와 관련된 동작을 할 수 있습니다.

이렇게 직관적인 이동의 동작을 나타내는 것은 Next.js에서 2가지 장점이 있습니다.

1) SEO에 좋다.
자바스크립트가 활성화 되지 않아도 a 태그로 된 링크는 크롤링 봇이 이동할 수 있고 링크를 인식할 수 있어서 SEO에 좋습니다.

2) data prefetch가능 
Next/link 태그가 사용자의 화면 (뷰포트)에 보이면 해당 페이지의 번들파일을 서버에 요청하여 prefetch합니다. 미리 가져온 번들을 통해 페이지 이동을 빠르게 할 수 있습니다.

결과적으로 Router.push, next/link 둘 다 페이지 이동을 수행하지만 웬만하면 Next/link를 사용하는 것을 추천드립니다.