2.2 Linking and Navigating

Next.js는 server-centric routing + client-side navigation 이다.

sever-centric의 장점으로는 client가 route map을 필요로 하지 않으며, server는 server component로 route map을 대체할 수 있다는 것이다.

한편 client-side navigation은 SPA와 같은 동작을 가능케 하며, 새로운 route 접근 시 전체 페이지의 리로드 없이 URL 업데이트와 필요한 component의 re-render만 수행해 효율성을 가져갈 수 있고, client-side cache를 사용할 수 있다는 장점이 있다.

 

# Link Component

React component로 HTML <a> element의 확장이다.

route 간 client-side navigation과 prefetch를 지원한다.

'next/link'로부터 import 해야하며 href가 필수 prop이다.

---

Props

href: string/Object. path or URL.

string 예시

<Link href="/dashboard">Dashboard</Link>

Object 예시

<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>

replace: boolean. default false. browser history에 새로운 URL 추가 대신 현재 history state로 대체할 지 여부.

prefetch: bookean. default true. background에서 해당 페이지를 prefetch 할 지 여부.

---

Dynamic routes: string interpolation을 사용하여 route를 동적으로 설정할 수 있다.

<Link href={`/blog/${post.slug}`}>{post.title}</Link>

usePathname(): link가 active한지 판단한다. React hook을 사용해야 하기에 client component에서만 사용 가능하다.

const pathname = usePathname()
const isActive = pathname.startsWith(href)

scroll to an id: Link component는 기본적으로 페이지의 가장 위로 스크롤을 이동시키기에 특정 id로 이동하고 싶은 경우 scroll={false}를 설정해주는 것이 안전하다.

<Link href="/#hashid" scroll={false}>
  Scroll to specific id.
</Link>

 

# useRouter()

React hook이기에 client component에서만 사용 가능하다.

프로그램적으로 route를 제어하기 위한 목적으로 사용되며 되도록이면 Link component를 사용할 것을 권장하고 있다.

const router = useRouter()
<button type="button" onClick={() => router.push('/dashboard')}>
  Dashboard
</button>

router.puh(href: string): client-side navigation을 수행하며 browser history에 stack을 추가한다.

router.replace(href: string): client-side navigation을 수행하며 browser history stack에 새로운 entry를 추가하지 않는다.

router.refresh(): 현재 route를 새로고침한다. 서버로 request를 보내고 data request를 re-fetching하며 server component를 re-render한다. 하지만 browser state나 React state는 보존된다.

router.prefetch(href: string): 주어진 route를 prefetch한다.

router.back(): soft navigation을 이용한 뒤로 가기

router.front(): soft navigation을 이용한 앞으로 가기

 

# Navigation 작동 원리

• Link component 혹은 router.push()로 route transition 시작
• router가 브라우저 주소 창의 URL을 업데이트
• rotuer가 client-side cache를 이용해 불필요한 작업을 수행하지 않음 (partial rendering)
• soft navigation 조건에 맞는 경우 cache로부터 segment를 가져와 사용. 그렇지 못할 경우 hard navigation 진행.
• payload fetching 중 loading UI 표시
• payload를 사용해 render 수행

 

soft / hard navigation

soft navigation 조건

• prefetch 되어있을 것
• dynamic segment를 가지지 않거나 현재 route와 같은 dynamic parameter를 가질 것

※ rotue와 같은 dynamic parameter를 가진다는 것은 '/dashboard/team-red/*'에서 '/dashboard/team-red/*로 이동하는 것과 같은 경우를 말함. '/dashboard/team-red/*'에서 '/dashboard/team-blue/* 같은 경우 hard navigation 진행.

hard navigation을 할 경우 server로부터 data refetch를 진행하며 모든 변경된 segment에 대해 re-render를 수행.

 

Prefetching

background에서 미리 페이지를 구성하는 것으로 Link component 사용 경우 viewport에 해당 component가 나타나는 순간 prefetch가 진행됨.

prefetched route의 rendered result는 client-side cache에 저장되며 soft navigation에 활용됨.