[next.js 공식문서] 04. Linking and Navigating

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Linking and Navigating

요소

기본

import Link from 'next/link';

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

동적 세그먼트에 연결

import Link from 'next/link';

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

useRouter() 훅

'use client';

import { useRouter } from 'next/navigation';

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

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

권장 : 왠만하면 <Link> 쓰셈

Navigating 작동방식

• 경로 전환은 <Link> 또는 router.push()로 됨
• 라우터는 브라우저의 주소표시줄에서 URL을 업데이트(history api) : https://kdydesign.github.io/2020/10/06/spa-route-tutorial/
• 라우터는 클라이언트측 캐시에서 변경되지 않은 세그먼트를 재사용함. 이를 부분 렌더링이라고도 함
• 소프트 탐색조건이 충족되면 서버가 아닌 캐시에서 새 세그먼트를 가져옴. 그렇지 않은 경우는 하드 탐색을 수행하고 서버에서 가져옴.
• 생성된 경우 페이로드를 가져오는 동안 서버에서 loading ui가 표시됨
• 라우터는 캐시된 페이로드 또는 새 페이로드를 사용하여 클라이언트에서 새 세그먼트를 렌더링함.

렌더링된 서버 컴포넌트의 클라이언트 측 캐싱

서버 컴포넌트의 렌더링 결과를 클라이언트 메모리에 캐시함.

캐시 무효화

router.refresh()를 사용하여 경로를 새로 고칠 수 있음.

Prefetch

<Link>로 연결된 경로를 미리 가져옴.
prefetch={false} 로 방지 가능
프로덕션에서만 활성화

하드 탐색

캐시를 무효화하고 서버에서 다시 가져옴

소프트 탐색

캐시가 있는 경우 서버에 데이터 요청을 안함
조건 - 동적 세그먼트가 없거나 현재 경로와 동일한 동적 매개변수를 갖는 경우

뒤로가기 / 앞으로가기

소프트 탐색으로 동작함

포커스 및 스크롤

🤔 뭔 얘기지?