Next.js에서 next/link를 사용하는게 좋을까요?

[hyjoong]

공식문서를 보면 next js 프로젝트에서 'next/link' 모듈의 <Link> 태그를 사용할 수 있는 것을 알 수 있습니다.

공식문서: https://nextjs.org/docs/pages/api-reference/components/link

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}
 
export default Home

---

아래 두 가지 방법으로 코드를 작성해도 페이지 이동이 정상적으로 될 것 같은데 next/link대신 아래 두 방식으로 작성해도 되지 않을까요?

1. <a></a>태그를 사용

function Home() {
  return (
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/about">About Us</a>
      </li>
      <li>
        <a href="/blog/hello-world">Blog Post</a>
      </li>
    </ul>
  );
}

2. 'next/router' 의 useRouter 을 사용

import { useRouter } from 'next/router'

function Home() {
  const router = useRouter()
  
  return (
    <ul>
      <li onClick={() => router.push("/")}>Home</li>
      <li onClick={() => router.push("/about")}>About Us</li>
      <li onClick={() => router.push("blog/hello-world")}>Blog Post</li>
    </ul>
  );
}

[hyjoong]

1. <a>태그 사용

a 태그를 사용하여 페이지를 이동하면 기본적으로 브라우저는 전체 페이지를 새로고침해서, 깜빡이는 현상이 발생해 사용자 경험이 저하될 수 있음

2. useRouter vs next/link

router.push와 next/link는 같은 동작을 하지만

• next/link는 태그를 생성하여 JavaScript가 비활성화되어도 사용할 수 있는 링크를 제공한다. 이는 크롤링 봇이 이동할 수 있고 링크를 인식할 수 있어서 SEO에 유리함
• next/link를 사용하면 prefetch가 가능하며, 뷰포트에 보일 때 해당 페이지의 번들 파일 및 정적 파일을 미리 가져와 페이지 이동을 더욱 빠르게 할 수 있다.

결론

상황에 맞게 선택하는게 좋겠지만 웬만하면 next/link를 사용하는게 좋다

참고

• app router 기준 next/link 공식문서를 보면 prefetch의 정적 렌더링 같은 경우 5분, 동적 렌더링 같은 경우 30초의 캐싱 주기를 가지고 있어서 prefetch이후 특정 시간이 지나면 무효화돼서 마우스를 호버하면 다시 prefetch를 하게된다