Next.js useRouter의 다양한 기능들(prefetch)

useRouter

'use client'
import {useRouter} from 'next/navigation'
export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('/') }}>버튼</button>
  )
}

router.push('/어쩌구') 실행하면 /어쩌구 경로로 페이지이동이 가능합니다.

<button onClick={()=>{ router.back() }}>버튼</button> 

router.back() 실행하면 뒤로가기해줍니다.

<button onClick={()=>{ router.forward() }}>버튼</button> 
router.forward()

실행하면 앞으로가기해줍니다.

<button onClick={()=>{ router.refresh() }}>버튼</button> 
router.refresh()

실행하면 새로고침해줍니다.
근데 페이지를 처음부터 다시 로드하는게 아니라 이전과 바뀐점을 분석해서 바뀐부분만 새로고침해준다고 합니다.
Next.js 공식문서에선 soft refresh라고 부릅니다.

prefetch 기능

<button onClick={()=>{ router.prefetch('/어쩌구') }}>버튼</button> 
router.prefetch('/') 

실행하면 '/어쩌구'의 내용을 미리 로드해줍니다.
그럼 그 페이지 방문할 때 매우 빠르게 방문할 수 있습니다.
빠른 사이트를 만들고 싶을 때 쓸 수 있는 유용한 기능입니다.

<Link href={'/'}>링크</Link> 

다행히 server component에서도 저런 기능을 사용할 수 있는데 <Link href={'/'}> 쓰면 태그가 화면에 보이는 순간 '/' 페이지를 자동으로 미리 로드해줍니다.

<Link href={'/어쩌구'} prefetch={false}>링크</Link> 

자동으로 미리 로드하는게 싫으면 prefetch 속성을 false로 바꿔줍시다.

링크가 많은 게시판의 경우 모든 링크를 다 읽을게 아닌데 굳이 모든걸 미리 로드하는건 자원낭비입니다.