네비게이션 최적화가 필요한 이유

전통적인 웹사이트에서는 <a> 태그를 사용하여 페이지 간 이동을 구현했다. 하지만 이 방식은 매번 전체 페이지를 새로고침하게 되므로 다음과 같은 문제가 발생한다.

1. 느린 페이지 전환 속도
2. 깜빡임 현상
3. 상태 초기화
4. 불필요한 서버 요청

Next.js의 Link 컴포넌트

Next.js는 이러한 문제를 해결하기 위해 Link 컴포넌트를 제공한다.

• 기본 특징
  • 클라이언트 사이드 네비게이션:
    • 페이지 간 이동이 브라우저 전체를 다시 로드하지 않고, 클라이언트 측에서 처리됩니다.
    • 빠른 페이지 전환으로 사용자 경험이 향상됩니다.
  • 자동 코드 스플리팅:
    • Next.js는 각 페이지를 필요한 코드만 로드하도록 자동으로 최적화합니다.
    • 프리패치(prefetch)를 기본적으로 활성화하여 사용자가 링크에 접근하기 전에 이동할 페이지의 데이터를 미리 가져온다.
  • SEO 친화적:
    • Next.js의 Link 컴포넌트는 HTML의 <a> 태그와 유사하게 작동하므로 검색 엔진이 링크를 크롤링할 수 있습니다.

기본 사용법

<Link href="/about" prefetch={false}>Go to About Page</Link>

동적 라우팅

<Link href={`/post/${postId}`}>View Post</Link>

자동 코드 스플리팅과 프리페칭

Next.js의 Link 컴포넌트는 두 가지 중요한 최적화 기능을 제공합니다:

1. 자동 코드 스플리팅

• 코드 스플리팅이란?

// pages/index.tsx
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>웰컴 페이지</h1>
      {/* 이 링크가 viewport에 들어오면 자동으로 코드를 프리페치 */}
      <Link href="/dashboard">
        대시보드로 이동
      </Link>
    </div>
  );
}

2. 프리페칭

tsx
Copy
// components/NavBar.tsx
import Link from 'next/link';

export default function NavBar() {
  return (
    <nav className="flex space-x-4">
      <Link
        href="/products"
        prefetch={true}// 명시적으로 프리페칭 설정 가능
      >
        제품 목록
      </Link>
    </nav>
  );
}