[Nextjs] Linking & Navigating

Next 라우터는 서버 중심의 라우팅과 클라이언트 사이드 네비게이션을 사용한다.

즉각적인 로딩 상태와 concurrent 렌더링을 지원한다.

즉, 네비게이션은 클라이언트 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하고, 중단할 수 있으며 race condition을 유발하지 않는다.

 

<Link> 컴포넌트

HTML <a> 요소를 확장한 것으로 prefetching과 클라이언트 사이드 네비게이션을 제공한다. 

Next에서 네비게이션에 주로 사용하는 방법이다.
특정 상황이 아니라면 <Link> 컴포넌트를 사용하는 것을 권장하고 있다.

import Link from 'next/link';

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

next/link에서 import해서 href를 설정해주면 된다.

 

동적으로 경로 설정하기

템플릿 리터럴을 사용해주면 된다.

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 

useRouter 훅은 클라이언트 컴포넌트 안에서 route를 변경하는 방법을 제공한다.

'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/navigation에서 import해서 클라이언트 컴포넌트 안에서 훅을 호출하면 된다.

 

useRouter은 push, refresh 등과 같은 메서드를 제공한다.

 

Navigation이 작동하는 방식

1. <Link> 또는 router.push()를 통해 경로가 변경된다

2. 라우터는 브라우저의 주소창에 URL을 변경한다.

3. rotuer는 클라이언트 캐시를 사용하여 변경되지 않은 segment는 재사용한다. 

4. soft navigation의 조건을 충족하면, 라우터는 캐시에서 새로운 segment를 패치한다. 그렇지 않은 경우, 라우터는 hard navigation을 수행하고 서버로부터 서버 컴포넌트를 패치한다.

hard navigation: 캐시가 유효하지 않아서 서버에서 데이터를 불러와 다시 렌더링하는 방식
soft navigation: 캐시가 재사용되어 서버에 새로운 데이터를 요청하지 않는 방식

soft navigation 조건
1. prefetch를 사용하는 경우
2. 동적 라우팅을 사용하지 않는 경우
3. 현재 경로에서 동일한 동적 파라미터를 사용하는 경우

5. 생성되면, 데이터가 패치되는 동안 서버로부터 로딩 UI를 보여준다

6. 라우터는 새로운 segment를 렌더링하기 위해 캐시를 사용하거나 새로운 데이터를 불러온다.

 

Client-side 캐싱

Client-side 캐시는 Next의 HTTP 캐시와는 다르다.

새로운 라우터는 서버 컴포넌트의 렌더링된 결과를 저장하는 인메모리 client-side 캐시를 갖고 있다.

즉, 특정 경우에 라우터는 서버에 새로운 요청을 하지 않고 캐시를 사용한다. 

https://beta.nextjs.org/docs/routing/linking-and-navigating#client-side-caching-of-rendered-server-components

Routing: Linking and Navigating | Next.js