Nextjs 13.4 app prefetch 하는 방법

공식문서 내용

Routing: Linking and Navigating | Next.js

 

prefetch? 

 

공식문서 설명을 보면 prefetch 은 페이지를 방문하기 전에 백그라운드에서 미리 로드하는 방법입니다.

미리 가져온 경로의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다.

클라이언측 캐시를 활용하여 변경되지 않는 세그먼트는 재사용하여 불필요한 작업을 방지합니다.

 

router api 가 달라진점

 

useRouter() 를 'next/router' 에서 import 하여

router.push( { pathname : '/test/[id]', query : { id: id } } 와 같이 pathname + query 조합으로 동적 URL 을 설정할수있었습니다.

 

하지만 nextjs 13.4 버전 이후에는 query와 pathname 이 router api 사라졌습니다.

그리고 next/router 가 아닌 next/navigation 에서 import 하여 사용할수 있습니다.

 

사라진 query 와 pathname 은 url 은 클라이언트 컴포넌트 전용으로 usePathnmae, useSearchParams() 로 대체되었습니다.

관련내용

navigation 에서 가져오는 useRouter 에서는 prefetch 이라 내장메서드가 추가되어 이 방법으로 prefetch 을 할수도 있습니다.

이처럼 MouseOver 와 같은 특정 이벤트로 프리패칭을 할 수 있습니다.

하지만 useRouter 는 hooks 라는 점에서 클라이언트 컴포넌트이기 때문에 use client 를 선언해줘야합니다.

 

 

Link

useRouter 에서 Link 를 사용하는 것을 권장하고있습니다.

브라우저에 초기 렌더링 됬을 때 혹은 스크롤하여 뷰포트에 나타났을때 Link 의 Props 중에서 prefetch 의 default 값이 true 라서 자동적으로 프리패칭 합니다. 프리패칭을 원하지 않을 때는 prefech={false} 로 사용할수 있습니다.

 

href 는 동적으로 사용할 수 있고 구조분해를 사용 할수도 있습니다.

 

 

메이저 회사 페이지 참고하기

ㅡ

여태 router를 Div 태그에 onClick 이벤트로 사용했던지라 a 태그로 감싼다는것은 많이 어색했습니다. 그래서 다른 메이저 회사 사이트들을 참고해봤는데요, 메이저 회사들의 페이지같은 경우는 제가 프로젝트 할때 모르는 부분이나, 부족한 부분이 있다 싶을때 많이 참고하는 사이트입니다. 

 

메이저 회사에서는 nextjs 13.4 버전은 아닌거같지만  a 태그로 감싼뒤에 아이템이 호버(인터랙티브한 상태)되면 프리패칭을 하는 모습을 볼수 있었습니다.