[Next.js] next13 - next/link, next/router로 라우팅 하기

next/link

next.js에서 제공하는 next/link는 CSR 방식이다.

기본적인 <a/> 태그를 사용하면 페이지를 이동할 때마다 html을 따로 받아오지만,

next/link를 사용하면 미리 링크된 페이지의 정보를 js파일로 이미 가지고 있기 때문에 CSR 방식으로 렌더링이 가능하다. 

 

<Link href="/section1">go!</Link>

 

 

불필요한 네트워크 요청 줄이기 

만약 걸어 놓은 링크가 페이지를 스크롤 해야 보이는 위치에 있는 경우에는 해당 페이지의 js파일을 미리 가져오지 않는다.

스크롤을 해서 해당 링크를 누를 수 있을 때가 되었을 때 lazy하게 js파일을 가져온다. 이를 통해 불필요한 네트워크 요청을 줄일 수 있다.

 

Next13과 Next12의 차이점

next12에서는 <Link>가 <a>태그를 대체할 수 없었기 때문에 <Link>안에 <a>태그를 따로 넣었어야 했다.

하지만 13에서는 <Link>태그가 <a>태그를 완전히 대체하므로 <Link>안에 <a>태그를 넣으면 오히려 에러가 발생한다. <Link>태그에 style을 입히려면 <a>태그에 하듯 바로 style을 사용해서 적용할 수 있다.

 

Next.js의 장점 

• Next는 모든 페이지에 대한 pre-rendering을 진행해서 SEO를 보장
• next/link를 통해 CSR 방식으로 라우팅 함으로써 빠른 라우팅과 적은 네트워크 요청  

 

next/router

아래와 같이 next/link를 대체할 수 있다.

 

<button onClick={()=>{

        router.push("/section1")

      }}>click</button>

 

하지만 화면에 버튼이 보여도 해당 페이지가 pre-rendering되지는 않는다.

만약 pre-rendering을 하고 싶다면,  개발자가 prefetch를 사용하여 직접 구현해야 한다.