개발자

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

2022년 11월 22일조회 1,007

안녕하세요! 처음 질문 올려봅니다. next.js에서 router.push와 next/link로 페이지를 이동할 수 있는데 차이가 있을까요? 페이지는 이동하지만 새로고침하고 싶지 않을 때 주로 사용하는데, 둘 다 사용해보니 같은 동작을 하는 것 같아서요. 제가 생각한게 맞을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

성원님의 프로필 사진

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를 사용하는 것을 추천드립니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

비슷한 질문 1

Q. next.js에서 페이지 이동할 때 Link 컴포넌트 vs useRouter의 push 메서드 중 어떤 걸 사용해야 할까요?

외부 링크로 이동해야 한다면 Link 태그가 적합한 거 같은데 제품 내 다른 페이지로 이동해야 한다면 push 메서드를 사용하는 게 적합할까요? 감사합니다.

push 나 replace를 브라우저 테스크에 맞게끔 설정하시면 좋을것 같습니다!!

외 2개 답변 보러 가기

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!