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에 활용됨.
'Web development > Next.js Docs 파헤치기' 카테고리의 다른 글
| 2.3 Route Groups & Dynamic Route (0) | 2023.07.06 |
|---|---|
| 2.1 Pages and Layouts (0) | 2023.06.16 |
| 2.0 Routing (0) | 2023.06.16 |
| 1. Next.js 시작하기 (0) | 2023.06.13 |