Slow Networks 데모

느린 네트워크에서는 prefetch가 완료되지 않은 상태에서 네비게이션이 발생할 수 있습니다. 이때 useLinkStatus를 사용하여 pending 상태를 UI로 보여줄 수 있습니다. 아래 링크를 클릭하면서 로딩 상태를 비교해보세요.

파일 구조

slow-networks/
├── page.tsx          ← 현재 페이지
├── fast/
│   └── page.tsx      ← 빠른 응답 (지연 없음)
└── slow/
    ├── page.tsx      ← 느린 응답 (API에서 3초 지연)
    └── loading.tsx   ← Skeleton UI

페이지 비교

빠른 페이지 →느린 페이지 (3초 지연) →

useLinkStatus 코드

'use client'
import Link from 'next/link'
import { useLinkStatus } from 'next/link'

function MyLink({ href, children }) {
  return (
    <Link href={href}>
      <LinkContent>{children}</LinkContent>
    </Link>
  )
}

function LinkContent({ children }) {
  // 반드시 <Link> 내부에서 사용
  const { pending } = useLinkStatus()
  return (
    <span>
      {children}
      {pending && <Spinner />}
    </span>
  )
}

체험 포인트: "느린 페이지"를 클릭하면 loading.tsx의 skeleton이 즉시 표시되고, 3초 후 실제 콘텐츠가 나타납니다. 느린 네트워크에서는 이 대기 시간이 더 길어질 수 있으며, useLinkStatus의 pending 상태로 사용자에게 피드백을 줄 수 있습니다.

핵심 파일 코드

// demo/nextjs/16.1.6/linking-and-navigating/slow-networks/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}