Link 컴포넌트를 이용한 네비게이션 최적화

 

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

전통적인 웹사이트에서는 <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. 자동 코드 스플리팅

• 코드 스플리팅이란?
  1. 초기 로딩 시간 감소
     • 필요한 코드만 먼저 로드
     • 나머지는 필요할 때 로드
  2. 리소스 효율성
     • 사용자가 실제로 방문하는 페이지의 코드만 다운로드
     • 불필요한 코드 다운로드 방지
• 코드 스플리팅은 애플리케이션 코드를 여러 개의 작은 번들로 나누는 과정입니다. 이는 다음과 같은 장점이 있습니다:

// 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>
  );
}

 

예시

const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

 

Link 컴포넌트의 고급 기능

1. 동적 세그먼트

// 동적 라우트 매개변수 사용
<Link
  href={{
    pathname: '/posts/[category]/[id]',
    query: { category: 'tech', id: '123' },
  }}
>
  포스트 보기
</Link>

2. 스크롤 제어

// 페이지 이동 시 스크롤 위치를 제어
<Link href="/long-page" scroll={false}>
  스크롤 없이 이동
</Link>

3. Shallow 라우팅

// URL만 변경하고 페이지는 리렌더링하지 않음
<Link href="/filter?category=new" shallow>
  필터 적용
</Link>

 

성능 최적화 팁

1. 적절한 프리페칭 설정

// 중요하지 않은 링크는 프리페칭 비활성화
<Link href="/optional-page" prefetch={false}>
  부가 정보
</Link>

1. 동적 임포트 활용

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Heavy'), {
  loading: () => <p>Loading...</p>
});

결론

Next.js의 Link 컴포넌트는:

1. 클라이언트 사이드 네비게이션
2. 자동 코드 스플리팅
3. 프리페칭을 통한 성능 최적화