[next 14 공식문서 부시기] 2.3. <Link> & navigating

연결 및 탐색

Next.js에서 경로 간을 탐색하는 방법에는 세 가지가 있습니다.

 

• <Link> 컴포넌트 사용
• useRouter 사용
• 기본적인 window.history 사용

Link component

<Link>은 HTML <a> 태그를 확장하여 prefetching 및 클라이언트 측을 제공하는 내장 구성 요소입니다. 경로 간 탐색. 이는 Next.js에서 경로 간을 탐색하는 기본적이고 권장되는 방법입니다.

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Props

Prop	Example	Type	Required
href	href="/dashboard"	String or Object	Yes
replace	replace={false}	Boolean	No
scroll	scroll={false}	Boolean	No
prefetch	prefetch={false}	Boolean	No

※ href Object : ex) {{ pathname: '/about', query: { name: 'test' }, }}

useRouter()

useRouter 후크를 사용하면 클라이언트 컴포넌트의 경로를 프로그래밍 방식으로 변경할 수 있습니다. 서버 컴포넌트의 경우 대신 redirect()을 사용합니다.

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

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

• router.push(href: string, { scroll: boolean }): 제공된 경로에 대한 클라이언트 측 탐색을 수행합니다. 브라우저 기록에 새 항목을 추가합니다.스택.
• router.replace(href: string, { scroll: boolean }): 브라우저의 기록 스택에 새 항목을 추가하지 않고 제공된 경로에 대한 클라이언트측 탐색을 수행합니다..
• router.refresh(): 현재 경로를 새로 고칩니다. 서버에 새 요청을 보내고, 데이터 요청을 다시 가져오고, 서버 구성 요소를 다시 렌더링합니다. 클라이언트는 영향을 받지 않은 클라이언트 측 React(예: useState) 또는 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 React 서버 구성 요소 페이로드를 병합합니다.
• router.prefetch(href: string): 프리페치 더 빠른 클라이언트 측 전환을 위해 제공된 경로입니다.
• router.back(): 브라우저의 기록 스택에서 이전 경로로 다시 이동합니다.
• router.forward(): 브라우저 기록 스택의 다음 페이지로 이동합니다.

라우팅 및 navigating 작동 방식

서버에서 애플리케이션 코드는 경로 세그먼트별로 자동으로 code splitting 됩니다. Next.js는 경로 세그먼트를 prefetching 하고 caching 합니다. 즉, 사용자가 새 경로로 이동할 때 브라우저는 페이지를 다시 로드하지 않고 변경된 경로 세그먼트만 다시 렌더링하여 탐색 경험과 성능을 향상시킵니다.

1. 코드분할 (Code Splitting)

 

애플리케이션 코드를 더 작은 번들로 분할하여 브라우저에서 다운로드하고 실행합니다. 이를 통해 전송되는 데이터의 양과 각 요청의 실행 시간이 줄어들어 성능이 향상됩니다.

 

Server Components 를 사용하면 애플리케이션 코드가 경로 세그먼트별로 자동으로 코드 분할될 수 있습니다. 즉, 현재 경로에 필요한 코드만 내비게이션에 로드됩니다.

 

2. 프리페칭 (Prefetching)

 

사용자가 경로를 방문하기 전에 백그라운드에서 경로를 미리 로드하는 방법으로 2가지로 구현 가능하다.

 

• <Link> component: 경로가 사용자의 뷰포트에 표시되면 자동으로 미리 가져옵니다. 프리페치는 페이지가 처음 로드될 때 또는 스크롤을 통해 표시될 때 발생합니다.
• router.prefetch(): useRouter 훅을 사용하여 프로그래밍 방식으로 경로를 미리 가져올 수 있습니다.

 

<Link> 의 프리페치 동작은 정적 경로와 동적 경로에 따라 다릅니다.

 

• 정적경로 (Static Routes): prefetch 는 기본값이 true입니다. 전체 경로가 프리페치되고 캐시됩니다.

 

• 동적 경로 (Dynamic Routes): prefetch는 기본값이 automatic입니다. 첫 번째 loading.js 파일까지 렌더링된 컴포넌트 "트리" 아래의 공유 레이아웃만 미리 가져오고 30초 동안 캐시됩니다. 이렇게 하면 전체 동적 경로를 가져오는 비용이 줄어들고 사용자에게 더 나은 시각적 피드백을 제공하기 위해 즉시 로드 상태를 표시할 수 있습니다.

※ refetch prop을 false로 설정하여 프리페칭을 비활성화할 수 있습니다. 또한 prefetch 은 개발 중에는 활성화되지 않고 배포 환경에서만 활성화됩니다.

3. 캐싱 (Caching)

 

Next.js에는 라우터 캐시(Router Cache)라는 메모리 내 클라이언트 측 캐시가 있습니다. 사용자가 앱을 탐색할 때 미리 가져온 경로 세그먼트와 방문한 경로의 React Server Component Payload가 캐시에 저장됩니다.

 

위 과정에서 서버에 새로운 요청을 하는 대신 캐시를 최대한 재사용하여 요청 수와 전송되는 데이터 수를 줄여 성능을 향상한다는 의미입니다. Router Cache

4. 부분 렌더링 (Partial Rendering)

 

부분 렌더링은 클라이언트에서 탐색을 다시 렌더링할 때 변경되는 경로 세그먼트만 의미하며 모든 공유 세그먼트는 보존됩니다.

5. 소프트 네비게이션

 

브라우저는 페이지 간을 탐색할 때 "hard navigation" 을 수행합니다. Next.js 앱 라우터는 페이지 간 "soft navigation"을 활성화하여 변경된 경로 세그먼트만 다시 렌더링되도록 합니다(부분 렌더링). 이를 통해 탐색 중에 클라이언트 React 상태를 유지할 수 있습니다.

6. 뒤로 및 앞으로 탐색

 

기본적으로 Next.js는 앞뒤 탐색을 위한 스크롤 위치를 유지하고Router Cache 의 경로 세그먼트를 재사용합니다 .

---

참고

https://nextjs.org/docs