next.js 13. useRouter와 <Link>의 차이점

react에서 react-router-dom을 사용했다면 비슷한 개념으로 이해할 수 있다.

react-router-dom이 제공하는

<Link> 컴포넌트와 useNavigate hook처럼 

next에서 제공하는

<Link> 컴포넌트와 useRouter가 있다.

 

1. <Link>

<Link> 사용방법

1. import Link from 'next/link'
2. 컴포넌트를 return <Link></Link>
3. 속성에는 href로 이동하고 싶은 경로 지정
4. build하고 next start로 production 환경으로 실행
5. 브라우저에 렌더된 링크를 누르면 href의 주소대로 이동.

동작 순서

1. Next.js는 최초로 생성됐을때 현재 페이지의 HTML을 불러옴(SSG)
2. but 페이지를 이동할때는 추가적인 HTML을 불러오지않음.
3. 이동페이지에는 해당 페이지에대한 JS 파일만 가져와서 DOM 렌더.(CSR)
4. 이때 Link에 커서만 가져다 대도 JSON을 요청하는데 이걸 preFetch라 하고, 이동할 페이지의 데이터가 담겨있는 JSON을 받는다.
5. 클릭해서 이동하려는 페이지로 가면, 해당 페이지에 JS랑 JSON이 합쳐져서 DOM 업데이트 ->CSR로 빠르게 라우팅
6. 그런데, 사실 Link에 커서를 올려도 preFetch 받지만, viewport를 감지해서 화면에 Link가 보이는지 여부를 먼저 판단한다.
   이동하려는 Link가 화면에 들어오지않았을때는 이동하려는 페이지의 JS, JSON을 preFetch하지 않다가 화면에서 Link가 보이면 그때 lazy하게 방식으로 preFetch 한다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

개발자도구에서

/section1/Links 에서는 가장 상단에 links html을 받아왔고,

화면에 /getStaticProps 부분이 해당 링크로 이동하는 <Link>컴포넌트인데, 

커서를 올리기만 해도 JSON이 받아지는걸 볼 수 있다.

 

그리고 받아온 JSON에 담긴 pageProps 객체에 프로퍼티중 data에 특정 숫자가 담겨있는데,

이 data가 이동 될 페이지('/getStaticProps')에 JS와 결합해서 DOM 렌더 된다.

 

특징

Link 컴포넌트는 viewport를 감지해서 컴포넌트가 화면에 보였을때 이동할 페이지의 JS와 JSON을 받아온다.(preFetch)

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

2. useRouter

Link컴포넌트처럼 이동하는건 똑같다.

useRouter 사용방법

1. import {useRouter} from 'next/router'

2. 컴포넌트 내에서 useRouter()를 변수에 할당 

const router = useRouter()

3. 이벤트 함수에 router.push('/url')를 추가해서 특정 이벤트가 실행될 때 함수 호출해서 페이지 이동.

<button
   onClick={() => {
   	router.push('/section1/getStaticProps');
	}}
	>
    move page
</button>

동작순서

1. Link컴포넌트와 3번까지는 똑같은데, useRouter는 자동으로 preFetch하지않는다.

2. preFetch 하려면 useEffect안에 코드를 추가해줘야 한다.

useEffect(() => {
    router.prefetch('/이동하려는 url');
  }, [router]);

3. 그러면 viewport 감지 여부와 상관없이 마운트 되면 preFetch해서 이동할 페이지의 JS와 JSON을 받아온다.

 

<Link>와 useRouter를 언제 써야 할까.

컴포넌트와 함수 호출문의 차이 여서

특별한 로직없이 바로 이동해야 하는 순간이라면 Link컴포넌트를 쓸 것같고

특정 연산 이후에 페이지가 이동되야 하는 조건이있다면 router를 호출해서 이동시킬 것 같다.

대신 preFetch가 필요하다면 useEffect로 설정을 추가해줘야겠지만,,,