[Data Fetching] (4) Linking and Navigating Next.js Beta Docs

https://beta.nextjs.org/docs/routing/linking-and-navigating
위 문서에 대한 번역을 진행합니다.

번역시점은 2023-05-01로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

Linking and Navigating

Next.js 라우터는 클라이언트 측 탐색과 서버 중심 라우팅을 사용합니다.

instant(즉각적인)한 로딩 상태와 concurrent rendering(동시 렌더링)을 지원합니다.

이 말은 navigation이 클라이언트 측 상태를 유지하고 비용이 많이 드는 리렌더링을 피하며

중단이 가능하고, 경쟁 조건을 일으키지 않습니다.

 

경로를 탐색하는 방법은 두가지가 있습니다.

1. <Link> 컴포넌트를 이용하는 것

2. useRouter Hook을 사용하는 것

이 페이지에서는 <Link> useRouter()를 사용하는 방법을 살펴보고

탐색이 작동하는 방식에 대해 알아볼거에요

<Link>는 HTML의 <a> 태그를 확장하여 경로 간 프리페칭 및 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다.

next.js에서 경로 사이를 탐색하는 주요 방법 중 하나입니다.

Link를 사용하려면 next/link에서 import 해온 뒤 href 속성을 전달해줍니다.

역주 : href 속성은 Link 컴포넌트에 required입니다.

이외 옵셔널 props는 API Reference에서 확인해보세요

 

Example: Linking to Dynamic Segments

동적 세그먼트에 링크할 때 탬플릿 리터럴 혹은 interpolation을 사용하여 링크 목록을 생성할 수 있어요

예를 들어 블로그 게시물 목록을 생성할 수 있습니다.

 

useRouter() hook

useRouter 훅을 사용하면 클라이언트 컴포넌트 내에서 Programmatically 하게 경로를 변경할 수 있습니다.

useRouter를 사용하려면 next/navigation에서 useRouter를 import하고

클라이언트 컴포넌트 내부에서 hook을 호출하는 형식으로 사용합니다.

useRouter는 push(), refresh() 등의 메서드를 제공합니다.

자세한 명세는 API reference를 참조하세요

Recommendation (권장사항)

반드시 useRouter를 사용해야하는 특별한 상황이 아닌 이상
웬만하면 <Link> 컴포넌트를 이용하여 라우팅을 하세요

How Navigation Works

- <Link>를 사용하거나 router.push를 호출하여 경로 전환을 시작합니다.

- 라우터는 브라우저의 주소 표시줄에서 URL을 업데이트 합니다.

- 라우터는 클라이언트 측 캐시에서 변경되지 않은 세그먼트를 재사용하여 불필요한 작업을 피합니다. 이것은 partial rendering(부분 렌더링)이라고도 부릅니다.

- 소프트 탐색 조건이 충족되면 라우터는 서버가 아닌 캐시에서 새 세그먼트를 가져옵니다. 그렇지 않은 경우엔 라우터는 하드 탐색을 수행하고 서버에서 서버 컴포넌트 페이로드를 가져옵니다.

- created 된 경우  payload를 가져오는 동안 서버에서 loading ui가 표시됩니다.

-라우터는 캐시된 혹은 새로운 페이로드를 사용하여 클라이언트에서 새 세그먼트를 렌더링합니다.

 

Client-side Caching of Rendered Server Components

Good to know
이 클라이언트 사이드 캐시는 서버사이드 next.js HTTP cache와 다릅니다.

새로운 라우터에는 in-memory-client-side cache가 있습니다. 이것은 서버 컴포넌트(페이로드)의 렌더링 결과를 저장하는 캐시입니다.

캐시는 라우트 세그먼트별로 분할되어 어느 수준에서든 invalidation을 허용하고 동시 렌더링 전반에서 일관성을 보장해줍니다.

사용자가 앱을 탐색할 때 라우터는 이전에 가져온 세그먼트와 미리 가져온 세그먼트의 페이로드를 캐시에 저장합니다.

즉 특정한 경우 라우터는 서버에 새로 데이터를 요청하는 대신 캐시를 재사용할 수 있습니다.

이렇게하면 데이터를 다시 가져오고 불필요하게 구성요소를 다시 렌더링 하는 과정을 생략할 수 있으므로 성능이 향상되는 결과를 낳습니다.

 

Invalidating the Cache

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

이렇게 하면 서버에 새 요청을 보내서 데이터 요청을 다시 가져오고 서버 컴포넌트를 다시 렌더링합니다.

자세한 내용은 api reference를 참조하세요!

(미래에는 mutations을 하면 캐시가 자동으로 무효화 될것입니다.)

역주 : 미래엔 이런 기능을 추가하겠다는 의미로 보이네요

 

Prefetching

프리페칭은 경로를 방문하기 전에 백그라운드에서 경로를 미리 로드하는 방법입니다.

프리페치된 경로의 렌더링 결과는 라우터의 클라이언트사이드 캐시에 추가됩니다.

따라서 프리페치된 경로로 거의 즉시 이동을 할 수 있습니다.

 

기본적으로 경로는 <Link> 컴포넌트를 사용할 때 뷰포트에 표시되는 대로 프리페치됩니다.

페이지가 처음 로드될 때 또는 스크롤 할 때 발생할 수 있어요

useRouter() 훅의 프리페치 메서드를 사용하면 programmatically 한 방식으로 경로를 프리페치할 수도 있습니다.

역주 : programmatically의 적절한 번역이 힘들어 원문 그대로 옮겼습니다.

Hard Navigation

Hard Navigation의 경우

탐색 시 캐시가 무효화되고 서버가 데이터를 새로 고침하여 변경된 세그먼트를 다시 렌더링합니다.

Soft Navigation의 경우

탐색 시 변경된 세그먼트에 대한 캐시가 재사용되며(캐시가 있는 경우) 서버에 데이터를 새로 요청하지 않습니다.

 

soft Navigation의 조건

탐색시 탐색 중인 경로가 미리 가져온 경로이고 동적 세그먼트를 포함하지 않거나

현재 경로와 동일한 동적 매개 변수가 있는 경우 Next.js는 소프트 탐색을 사용합니다.

 

예컨대 [team]이라는 동적인 세그먼트가 포함된 경로를 고려해보세요

/dashboard/[team]/* 과 같은 예제에서 아래 캐시된 세그먼트는 오로지 [team] 파라미터가 변할때만 무효화됩니다.

 

예를 들어 dashboard/team-red/* 에서 dashboard/team-red/*로 이동하는 것은 soft navigation이 됩니다.

반면 dashboard/team-red에서 dasheboard/team-blue로 이동하는 것은 hard navigation이 됩니다.

역주 : *를 와일드 카드처럼 이해하시면 될 것 같습니다. 
dashboard/team-red/ 뒤에 올수 있는 거의 모든 경우의 수를 지칭합니다.

Back/Forward Navigation

뒤로 / 앞으로 탐색

back and forward navigation(popstate event)는 soft navigation을 합니다.

즉 클라이언트 측 캐시가 재사용되고 탐색이 거의 즉각적으로 이루어집니다.

 

Focuse and scroll Management

초점 및 스크롤 관리

기본적으로 Next.js는 탐색에서 변경된 세그먼트를 보기 위해 초점을 설정하고 스크롤 합니다.

이 접근성과 사용성 기능의 중요성은 고급 라우팅 패턴이 구현될 때 더욱 분명해질것입니다.