[Next.js] 'Link', 'router.push()', 'a' tag 어떻게 다를까?

IN DUCK KANG·2023년 3월 26일
3

Next.js 기록

목록 보기
2/3

Next.js 로 웹 개발을 할때면 수 많은 페이지의 링크 이동을 구현 하게 되는데, 페이지 이동을 다음과 같이 크게 3가지의 방식으로 구현할 수 있다.

// 1. next/link의 Link 컴포넌트를 이용
<Link href="/home">HOME</Link>
// 2. router.push() 를 이용
<button onClick={() => router.push("/home")}>HOME</button>
// 3. a 태그를 이용
<a href="/home">HOME</a>
// 구현 코드
<Link href="/home">HOME</Link>
// 빌드 결과
<a href="/home">HOME</a>
  • 빌드 후, a tag로 자동 변환된다.
  • a tag 의 장점을 갖는다. (SEO 최적화, prefetch 가능, 우클릭 기능 사용 가능 등)
  • 페이지 렌더링 시점에, 이동할 주소가 정해져 있는 경우 사용
  • 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.

2. router.push()

  • 빌드 후, 이동할 주소가 html 상에 노출되지 않기 때문에 SEO에 취약하다.
  • SEO가 필요 없거나, 되면 안되거나, 숨겨야 할때 사용
  • 페이지 렌더링 시점에, 이동할 주소가 정해져 있지 않은 경우 사용 (ex. 비동기로 클릭 시점에 이동할 주소가 정해지는 경우 등)
  • 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.

3. a 태그

  • html 전체가 relaod 되기 때문에, 외부 링크 일때 사용하며, 일반적으로 내부 링크 이동시에는 의도한 경우가 아니고서는 사용을 지양하는 것이 좋다.

참고

Next.js 13 부터 다음과 같이 Link 사용 시, child에 a tag 를 사용할 필요가 없어졌다.

The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.

// Next.js 13 미만
<Link href="/home"><a>HOME</a></Link>
//Next.js 13 이상
<Link href="/home">HOME</Link>
profile
Web FE Developer

0개의 댓글