[Next.js] 페이지 간 이동 방식 (= <Link>, <a>, router.push() 비교)

Next.js 에서 페이지 간의 이동을 위해
<Link>, <a>, router.push() 등을 사용할 수 있다.
위 세가지 방식의 특징과 차이점을 알아보자

 

---

 

📌 <Link>

• Next.js 에 내장된 컴포넌트 (next/link)
• Client side 네비게이션을 지원함
• 브라우저의 새로고침 없이 페이지 이동
  → 매우 빠른 페이지 전환 가능
  → 내부 페이지 이동 시 사용
  → 전체 html 중 필요한 부분만 리렌더링 하도록 셋팅됨 (앱처럼 부드러운 사용감)
  → SPA 형태의 웹사이트를 만들 때 유용함 (+ 성능상의 이점)

 

📌 <a>

• html 에서 기본적으로 제공하는 태그
• 페이지가 완전히 새로고침됨
  → 외부 페이지 이동 시 사용 (내부 페이지 이동 시에는 지양)

 

📌 router.push()

• Next.js 에서 제공하는 useRouter 훅 안에 있는 메소드 (next/router)
• 브라우저의 새로고침 없이 페이지 이동
  → 매우 빠른 페이지 전환 가능
  → 내부 페이지 이동 시 사용
  → 전체 html 중 필요한 부분만 리렌더링 하도록 셋팅됨 (앱처럼 부드러운 사용감)
  → SPA 형태의 웹사이트를 만들 때 유용함 (+ 성능상의 이점)

 

router.push() 와 <Link> 의 차이 ?

: router.push() 는 build 후, 이동할 주소가 html 상에 노출되지 않기 때문에 SEO 에 취약하다.

<Link> 컴포넌트는 정적인 경로에 사용되고, router.push() 는 동적 라우팅 / 조건부 라우팅 등 복잡한 상황에서 사용된다.