[Next.js] Linking and Navigating(라우트 탐색)

Next.js에서 라우트 탐색은 Link 컴포넌트를 사용하거나 useRouter Hook을 사용하는 방법이 있다.

링크 컴포넌트(Link Component)

Link 컴포넌트는 a 태그를 확장하여 라우트 간 프리페칭(pre-fetching) 및 클라이언트 탐색을 제공하는 내장 컴포넌트이며, 아래와 같이 사용한다.

import Link from 'next/link';

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

Link 컴포넌트에는 href 말고도 replace, scroll, prefetch 프로퍼티를 전달할 수 있다.

해당 라우트 활성화 체크

usePathname hook을 사용하여 현재 라우트가 활성 상태인지 확인할 수 있다.

'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';

export function Navigation({ link }) {
  const pathname = usePathname();
  const isActive = pathname === link.href;

  const activeClassName = isActive ? 'blue' : 'black';

  return (
    <Link className={activeClassName} href={link.href}>
      {link.name}
    </Link>
  );
}

id로 스크롤하기

기본적으로 Link 컴포넌트는 a 태그로 렌더링되기 때문에, 탐색 시 해시 링크를 활용해서 특정 아이디로 스크롤 할 수 있다.

<Link href="/dashboard#settings">Settings</Link>

// Output
<a href="/dashboard#settings">Settings</a>

스크롤 복원 비활성화

Next.js는 기본 동작으로 라우트 이동 시 스크롤이 상단으로 이동하며 뒤로가기, 앞으로가기 탐색 시에는 스크롤 위치를 유지한다.

이 동작을 비활성화하려면 Link 컴포넌트나 router의 scroll 옵션에 false를 전달하면 된다.

// next/link
<Link href="/dashboard" scroll={false}>
  Dashboard
</Link>;

// useRouter
import { useRouter } from 'next/navigation';

const router = useRouter();
router.push('/dashboard', { scroll: false });

useRouter Hook

useRouter() 훅을 사용하면 프로그래밍 방식으로 라우트를 변경할 수 있다. 클라이언트 컴포넌트 내에서만 사용할 수 있으며, next/navigation에서 가져올 수 있다.

'use client';

import { useRouter } from 'next/navigation';

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

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

Next.js에서는 useRouter()에 대해 특별히 요구 사항이 없다면, Link 컴포넌트 사용을 권장한다.

라우팅 및 내비게이션 작동 방식

Next.js의 앱 라우터는 라우팅에 여러 렌더링 방식을 지원하는 하이브리드 방식을 사용한다.

1. 서버에서는 코드가 라우트 세그먼트별로 자동으로 코드 분할된다.
2. 클라이언트에서는 Next.js가 라우트 세그먼트를 프리페칭과 함께 캐싱한다.

즉, 사용자가 라우트를 이동할 때 페이지를 새로고침하지 않고 변경된 세그먼트만 다시 렌더링하여 내비게이션 경험과 성능을 개선한다.

프리페칭(Prefetching)

프리페칭(Prefetching)은 사용자가 라우트로 이동하기 전에 백그라운드에서 미리 로드하는 방법이며, Next.js에서 라우트를 프리페칭하는 방법에는 두 가지가 있다.

Link 컴포넌트

사용자의 뷰포트에 표시될 때 라우트가 자동으로 프리페치된다. 프리페칭은 페이지가 처음 로드될 때, 혹은 스크롤링으로 뷰포트에 표시될 때 발생한다.

Link 컴포넌트의 프리페칭 동작은 정적 라우트와 동적 라우트에 따라 다르다.

1. 정적 라우트(Static Routes): prefetch는 기본값이 true이다. 전체 라우트가 프리페치되고 캐시된다.
2. 동적 라우트(Dynamic Routes): prefetch 기본값은 자동이다. 첫 번째 loading.js 파일까지의 공용 레이아웃만 프리페치되고 30초 동안 캐시된다. 이렇게 하면 전체 동적 라우트를 불러오는 데 드는 비용이 절감되며, 로딩 상태를 즉시 표시해 사용자에게 더 나은 시각적 피드백을 제공할 수 있다.

router.prefetch()

useRouter 훅을 사용하여 프로그래밍 방식으로 라우트를 프리페치한다.

prefetch를 false로 설정하여 프리페치를 비활성화할 수 있으며, 프리페칭은 개발 환경에서는 작동하지 않는다.

캐싱(Caching)

Next.js에는 라우터 캐시라는 in-memory client-side cache가 있다. 사용자가 앱을 탐색할 때, 프리페칭한 라우트 세그먼트와 방문한 라우트의 React 서버 컴포넌트 페이로드가 캐시에 저장된다.

즉, 탐색 시 서버에 새로운 요청을 하는 대신 캐시를 최대한 재사용하여 요청과 데이터 전송 횟수를 줄여 성능을 개선한다.

부분 렌더링(Partial Rendering)

Next.js에서 부분 렌더링이란, 내비게이션에서 변경된 라우트 세그먼트가 클라이언트에서 렌더링되고 공유 세그먼트는 그대로 유지되는 것을 의미한다.

예를 들어, 두 형제 라우트인 /dashboard/settings와 /dashboard/analytics 사이를 탐색하는 경우 /settings이나 /analytics 페이지는 렌더링되지만 공유되는 /dashboard 레이아웃은 유지된다.

부분 렌더링 기능이 없다면 라우트를 탐색할 때마다 전체 페이지가 서버에서 다시 렌더링되며, 부분 렌더링으로 인해 전송되는 데이터의 양과 실행 시간이 줄어들어 성능이 향상된다.

Soft Navigation(소프트한 탐색)

기본적으로 브라우저는 페이지 간 Hard Navigation(강한 탐색)을 수행한다. 즉, 브라우저는 페이지를 다시 로드하고 훅과 같은 React 상태와 사용자의 스크롤 위치, 포커싱된 요소와 같은 브라우저 상태들을 재설정한다.

하지만 Next.js에서 앱 라우터는 소프트한 탐색을 사용하며, 이는 React와 브라우저 상태를 유지하면서 변경된 세그먼트만 렌더링한다.

뒤로가기, 앞으로가기 탐색

기본적으로 Next.js는 뒤로가기와 앞으로가기 탐색 시 스크롤 위치를 유지하고, 라우터 캐시에서 세그먼트를 재사용한다.