[Next.js] router / a / Link 의 차이

 

Next.js router / a / Link 의 차이

 

Next.js 상에서 페이지 이동을 구현할 때 router, a 태그, Link를 사용할 수 있다. 페이지 이동만 봤을 때는 셋이 비슷해 보이지만, 섬세한 기능 구현을 위해서는 셋의 차이점을 인지하고 있는 것이 좋다.

 

 

1. rotuer

react hook 중 하나인 useRouter를 통해 객체 router를 생성해서 페이지를 이동하는 방식이다. 페이지 전체를 로드하는 것이 아닌 필요한 부분만 새로 가져오는 방식을 취한다. 보통 push 메소드를 이용해 다음과 같이 사용한다.

import { useRouter } from 'next/router';
 
export default function Page() {
  const router = useRouter();
 
  return (
    <button type="button" onClick={() => router.push('/주소')}>
      Click me
    </button>
  );
}

router의 장점은 다양한 객체 속성을 활용할 수 있다는 점이다. 가령 basepath 속성을 이용해 기본 path를 지정할 수 있고, fallback 속성을 이용해 path에 문제가 있을 경우 에러 페이지를 내보낼 수 있다. 

단점은 onClick이라는 이벤트 핸들러에 의해 움직이기 때문에, Next.js의 장점 중 하나인 SEO 기능을 활용할 수 없다는 것이다. SEO는 이벤트를 읽을 수 없기 때문에 router 사용 시 페이지 이동을 감지하지 못한다.

 

 

2.  a

순수 HTML 요소인 a 태그는 페이지를 완전히 새롭게 로드한다. SEO 크롤링에는 적합하지만, 페이지 전체를 로드하다 보니 성능 면에서 뒤떨어진다. 필요한 요소만 갈아끼우는 rotuer와 달리, HTML 파일 전체를 로딩하는 a 태그는 화면 깜빡임이나 시간이 오래 걸리는 단점을 가질 수밖에 없다.

 

 

3. Link (v.13 기준)

Next.js의 Link는 a 태그의 확장된 버전이라고 할 수 있다. 기존 Link 컴포넌트는 a 태그를 감싸는 형식을 취해야 했다(<Link><a>...</a></Link>). 이는 웹 표준을 해친다는 지적이 있었고, v13에서는 Link 컴포넌트가 a 태그를 완전히 대체해 <Link href="주소" /> 라고만 써도 된다. 

// 사용예시

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;

 

Link의 장점은 CSR과 SSG 방식이 적절히 혼합되어 있다는 것이다. 이동할 페이지의 js 파일을 프리렌더링해서 라우팅 시 빠르게 이동한다. 또한 HTML 파일을 가지고 있기 때문에 SEO 크롤링에도 문제가 없다. 그리고 화면 상 Link가 노출되지 않을 때는 다음 페이지의 js 파일을 가져오지 않는다. 이를 통해 불필요한 네트워크 요청을 줄일 수 있다.

 

 

 

Reference

https://imagineu.tistory.com/83

https://hayeondev.gatsbyjs.io/220218-nextjs-router/