[Next.js] Link vs useRouter

Next로 개발을 하던 도중 페이지 이동 시 Link를 써야 하는지, useRouter를 써야 하는지 헷갈려서 찾아보았다.

 

<Link>

• HTML <a> 태그를 확장하여 경로 간 프리패칭 
  • 프리패칭(prefetching) : 사용자가 경로를 방문하기 전에 백그라운드에서 페이지를 미리 로드하는 방법
• 렌더링된 링크에 대해 Client-Side Page Navigation을 지원하여 페이지 전환이 빠르고 부드럽게 이루어진다.
  • 사용자가 브라우저에서 페이지 간 이동을 할 때, 브라우저가 전체 HTML 페이지를 새로 요청하고 다시 로드하는 것이 아니라, 자바스크립트가 브라우저 내에서 페이지 콘텐츠만 동적으로 전환하는 방식
• SEO 최적화에 유리하다. 
• 기본 navigation보다 빠르며, SPA(Single Page Application)의 특성을 유지한다.

언제 사용?

- 페이지 사이를 이동하는 링크가 UI 상에 존재하는 경우 (버튼 등)

- 사용자가 명확하게 클릭하여 페이지를 이동할 때

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

 

useRouter

• 경로를 프로그래밍 방식으로 변경할 수 있다.
  • 사용자가 클릭하는 것이 아닌, javascript 코드로 페이지 이동을 제어한다.
• 페이지 전환 외에도 다양한 라우팅 관련 기능을 제공한다. (push, replace, reload 등)
• 조건에 따라 다른 페이지로 전환할 때 사용한다.

언제 사용?

- 이벤트 핸들러 내에서 코드로 페이지를 이동할 때 (ex: 폼 제출 후 리다이렉션)

- 조건에 따라 프로그래밍적으로 페이지를 전환해야 할 때

- 사용자가 직접 클릭하지 않아도 페이지를 이동해야 하는 경우 (ex: 로그인 후 자동 리다이렉션)

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

 

 

SEO 측면에서 useRouter보다 <Link>가 유리한 이유

1. HTML 표준 준수 : <Link>는 <a> 태그로 렌더링되어, 검색 엔진이 쉽게 크롤링할 수 있다.
2. 앵커 텍스트 제공 : 링크 텍스트가 포함되어(<Link> 컴포넌트 내부의 텍스트) 검색 엔진이 페이지의 주제를 파악하는 데 도움이 된다.
3. 크롤링 가능성 : 검색 엔진 크롤러가 자바스크립트 실행 없이도 링크된 페이지를 크롤링하고 인덱싱할 수 있다.
4. 미리 로딩(prefetch) : 페이지 전환 속도를 향상시켜 SEO 점수를 높이는 데 유리하다.
5. 자바스크립트 의존성 감소 : 자바스크립트 실행 여부에 관계없이 SEO가 잘 유지된다. (SSR이나 SSG를 통해 렌더링되는 경우)

 

 

 

 

결론:

<Link>는 정적 라우팅에 사용되고, useRouter는 프로그래밍 방식의 라우팅(동적 라우팅, 조건부 라우팅) 등 복잡한 상황에서 사용된다.

 

 

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating