Linking and Navigating
Next.js 에서 페이지 이동을 위해 사용할 수 있는방법은 두가지가 있습니다.
Link 컴포넌트를 사용하는 방법과 useRouter를 이용하는 방법입니다.
<Link> Component
Link 컴포넌트는 a 태그를 확장한 컴포넌트 입니다. Link 컴포넌트는 prefetching 작업을 제공하며 client-side 에서의 navigation 작업을 제공합니다.
Link 컴포넌트는 next/link 에서 import 가능하며 href 속성을 통해 이동할 라우트를 등록합니다.
checking Active Links
next/navigation의 usePathname을 이용하면 해당 링크가 현재 위치인지 확인할 수 있습니다.
scrolling to an id
페이지 이동과 특정 스크롤 위치로 이동하고 싶다면 'url#id' 형태로 href 를 제공하면 됩니다. 그럼 id가 등록된 해당 요소로 스크롤이 이동합니다.
useRouter() Hook
useRouter는 개발코드상에서 route를 이동해야 할 경우 사용합니다.
useRouter hook 은 Client Component 에서만 동작합니다.
useRouter는 'next/navigation'에서 가져올 수 있습니다.
How Routing and Navigation Works
서버에서 route segments 단위로 프로그램의 코드를 자동으로 분리시킵니다. 그 다음 Client에서 route segments 들을 prefetch, cache 작업을 합니다.
1. Prefetching
Prefetching은 사용자가 해당 경로에 접근하기 전에 미리 로딩하는 기법중 하나입니다.
Next.js 에는 prefetching 방법으로 두가지 방법을 사용할 수 있습니다.
1. <Link> 컴포넌트 사용하기
사용자가 보는 페이지에 Link 컴포넌트가 있으면 자동으로 prefetch 작업을 합니다. prefetching 작업은 사용자가 페이지에 첫 진입했을때나 스크롤을 통해 해당 컴포넌트를 보게되면 작업이 시작됩니다.
2. router.prefetch()
useRouter 의 prefetch() 함수를 이용해서 prefetch 작업을 할 수 있습니다.
Link 컴포넌트를 이용한 prefetch 작업은 static 이나 dynamic routes 와 동작하는 방식이 다릅니다.
prefetch 는 prop를 false를 주면 작업을 막을 수 있습니다.
2. Caching
Next.js 는 클라이언트에 인메모리 캐시를 사용하며 이를 Router Cache 라고 부릅니다. 사용자가 서비스를 돌아다닐때, 서버 컴포넌트에서 사전로딩된 라우터 값들과 이동된 경로들이 캐싱됩니다.
3. Partial Rendering
Partial rendering은 형제 페이지 경로들 사이에 페이지를 이동할 경우 발생하는 현상입니다. 형제 페이지 사이에는 부모 layout을 공유하게 되는데, 같은 layout을 공유하기 때문에 다시 랜더링 될 필요가 없습니다.
그래서 동일한 layout 은 보존시킨 상태에서 자식 페이지 부분만 랜더링 작업을 하게됩니다.
4. Soft Navigation
기본적으로 브라우저는 모든 페이지를 재랜더링 하는방식으로 동작합니다. 예를 들면 useState를 이용한 값들이 변경되면 페이지들이 재랜더링 됩니다.
하지만 Next.js 의 App Router는 Soft Navigation 방식으로 동작합니다. 이는 불필요한 전체 페이지 재랜더링을 하지 않고, 랜더링이 필요한 부분만 랜더링을 하는 방식으로 동작하는 것을 말합니다.
5. Back and Forward Navigation
기본적으로 Next.js 는 스크롤 포지션을 Router Cache에서 관리하고 있기 때문에, 뒤로 돌아가거나 앞으로 페이지를 이동해도 원래 보고있던 스크롤 경로를 유지할 수 있습니다.
