[NextJs] Link와 router.push

개요

nextjs를 공부하다보니 페이지를 이동하는 방법으로 Link, router.push()를 알게 되었습니다. 무슨 차이가 있는지 한번 찾아보았고 제 방식대로 정리를 해보았습니다.

정확한 정의를 알고 싶다면

Link에 대한 내용

next/link | Next.js

router에 대한 내용

next/router | Next.js

- Link

import Link from 'next/link'

function Home() {
  return (
        <Link href="">Blog Post</Link>
  )
}

1. Link 태그는 전체 페이지를 다시 로드하지 않고 새 페이지를 동적으로 로드할 수 있으므로 더 빠르고 부드러운 화면 전환을 보여 줍니다.
2. prefetch 기능이 있다.간단히 말하자면 뷰포트(브라우져에 보이는 상태)에서 보이는 Link로 연결되어있는 페이지는 미리 준비를 시켜놓는다고 할 수 있습니다.
3. 1번에서 말한대로 전체 페이지를 로드하지 않으면서 <a> 태그를 생성 하므로 웹사이트가 크롤링되어 SEO(검색엔진최적화)에 유리합니다.

- router

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()

  const handleClick = (e) => {
    e.preventDefault()
    router.push('/경로')
  }

  return (
    <button onClick={handleClick} >
      버튼
    </button>
  )
}

1. <a>태그를 생성하지 않아 웹사이트가 크롤링되지않아 SEO에 불리합니다.
2. SEO에 크게 상관이 없고 SPA(single page application)처럼 보이게 하고 싶을때 사용합니다.

---

결론

NextJs를 사용하는 이유가 SEO를 사용하기 위함인데 이를 위해서 링크를 걸어 page를 이동시키고 싶을때는 Link를 함수의 결과적 액션으로서 사용하고 싶다면 router.push()를 사용하는게 좋을거같다는 생각이 들었다.