[Next.js] Route System - 3) next/route useRouter

useRouter()

react-router-dom dml useNavigation 기능을 Next.js 에서 next/route useRouter()로 구현할 수 있다.

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  console.log(router);
  // ...
}

• pathname: string: 현재 경로로 페이지 경로 이면, basePath 또는 locale 은 포함되지 않는다.
• query: object: 동적 라우트 매개변수를 포함하는 객체로 구문 분석된 쿼리 문자열
• asPath: string: basePath또는 locale 없이 브라우저에 표시되는 경우(query포함) 
• isFallback: boolean: 현재 페이지의 fallback 모드 여부
• basePath: string: 활성화된 basePath
• locale : string : 활성화된 locale
• locales : string[] : 지원되는 모든 locale
• isReady : boolean : 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사용해야 한다.
• isPreview : boolean : 애플리케이션의 미리보기 모드 여부

 

router.push

클라이언트 사이드의 라우팅 처리를 할 수 있는 기능이다.

router.push(url, as, options)

• url (Reqired): 이동할 경로
• as (Optional): 브라우저에서 표시된 경로
  • scroll: 기본값은 true 페이지 이동 후 상단으로 스크롤
  • shallow: 기본값은 false로 getStatickProps, getServerSideProps, getInitalProps 를 실행하지 않고 현재 페이지의 경로를 업데이트하는 얕은 라우팅을. 
  • locale: 새 페이지의 locale 을 나타낸다.

---

How does navigation work?

1. Link 나 router.push() 로 경로전환이 일어난다.
2. 브라우저 주소창에 있는 URL을 업데이트한다.
3. 라우터는 클라이언트 측 캐시에서 변경되지 않은 segment를 재사용하여 불필요한 작업을 방지한다. 이를 부분 렌더링이라고도 한다.
4. soft navigation 조건이 만족하면, 라우터는 서버 대신 캐시에서 새로운 segment를 가져온다. 그렇지 않으면, hard navigation 을 수행하고 서버 컴포넌트를 불러온다.
5. 컴포넌트가 created 되었다면, payload를 fetch 하는 동안 loading UI 가 표시된다.
6. 라우터는 캐시된 payload 또는 새로운 payload 를 사용해 클라이언트의 새 segment를 렌더링한다.

---

Hard navigation

Navigation 시 캐시는 무효화되고 서버에서 데이터를 다시 가져와 변경된 segment 를 리렌더링한다.

Soft navigation

Navigation 시 변경된 segment 에 대한 캐시는 재사용되며, 서버에게 새로운 데이터 요청을 보내지 않는다.

Conditions for Soft Navigation

탐색 시 당신이 탐색 중인 경로가 prefetch 되었으며 동적 segment 가 포함되지 않았거나 현재 경로와 동일한 동적 매개변수가 있는 경우 Next.js 는 Soft Naviagtion 을 사용한다.

• /dashboard/team-red/*에서 /dashboard/team-red/*로 이동하면 Soft Navigation
  /dashboard/team-red/*에서 /dashboard/team-blue/*로 이동하면 Hard Navigation

Back/Forward Navigation

뒤로가기/앞으로가기 또한 Soft Navigation로 동작한다. 이는 클라이언트 측 캐시가 재사용되고, navigation 이 near-instant 라는 것을 의미한다.

Focus and Scroll Management

기본적으로, Next.js 는 navigation 시 변경된 세그먼트에 초점을 맞추고 스크롤 하여 보여준다.

---

Client-side Caching of Rendered Server Components

새 라우터에는 서버 컴포넌트의 렌더링 결과를 저장하는 in-memory client-side cache 가 있다. 캐시는 동시 렌더링에서 일관성을 보장하는 route segment 로 분할된다.

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

즉, 특정 경우, 라우터는 서버에 새 요청을 하는 대신 캐시를 다시 사용할 수 있다. 이렇게 하면 데이터를 다시 가져오고 구성 요소를 불필요하게 다시 렌더링하지 않으므로 성능이 향상된다.