Next.js에서 경로 미리 가져오기

Next.js가 경로 미리 가져오기로 탐색 속도를 높이는 방법과 이를 맞춤설정하는 방법

Milica Mihajlija

이 게시물에서는 Next.js의 라우팅 작동 방식, 속도에 맞게 최적화하는 방법, 필요에 맞게 맞춤설정하는 방법을 알아봅니다.

Next.js에서는 라우팅을 수동으로 설정할 필요가 없습니다. Next.js는 파일 시스템 기반 라우팅을 사용하므로 ./pages/ 디렉터리 내에 파일과 폴더를 만들기만 하면 됩니다.

index.js, margherita.js, pineapple-pizza.js의 세 파일이 포함된 pages 디렉터리

다른 페이지로 연결하려면 이전 <a> 요소를 사용하는 것과 마찬가지로 <Link> 구성요소를 사용합니다.

<Link href="/margherita">
  <a>Margherita</a>
</Link>

탐색에 <Link> 구성요소를 사용하면 Next.js에서 몇 가지 작업을 더 실행합니다. 일반적으로 링크를 따라 페이지로 이동하면 페이지가 다운로드되지만 Next.js는 페이지를 렌더링하는 데 필요한 JavaScript를 자동으로 미리 가져옵니다.

링크가 몇 개 있는 페이지를 로드하면 링크를 따라갈 때쯤이면 링크 뒤에 있는 구성요소가 이미 가져와져 있을 가능성이 높습니다. 이렇게 하면 새 페이지로의 탐색이 빨라져 애플리케이션 응답성이 개선됩니다.

예제 앱에서 index.js 페이지는 <Link>를 사용하여 margherita.js에 연결됩니다.

Chrome DevTools를 사용하여 margherita.js이 미리 가져와졌는지 확인합니다. 1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 전체 화면을 누릅니다.

  1. Chrome DevTools를 엽니다.
  2. 네트워크 탭을 클릭합니다.
  3. 캐시 사용 중지 체크박스를 선택합니다.
  4. 페이지를 새로고침합니다.

index.js를 로드하면 네트워크 탭에 margherita.js도 다운로드된 것으로 표시됩니다.

margherita.js가 강조 표시된 DevTools 네트워크 탭

자동 미리 가져오기 작동 방식

Next.js는 뷰포트에 표시되는 링크만 미리 가져오고 Intersection Observer API를 사용하여 이를 감지합니다. 또한 네트워크 연결이 느리거나 사용자가 Save-Data를 사용 설정한 경우 미리 가져오기를 사용 중지합니다. 이러한 검사를 기반으로 Next.js는 후속 탐색을 위한 구성요소를 다운로드하기 위해 <link rel="preload"> 태그를 동적으로 삽입합니다.

Next.js는 JavaScript를 가져오기만 하고 실행하지는 않습니다. 이렇게 하면 링크를 방문할 때까지 미리 가져온 페이지에서 요청할 수 있는 추가 콘텐츠가 다운로드되지 않습니다.

불필요한 프리패치 방지

불필요한 콘텐츠를 다운로드하지 않으려면 <Link>에서 prefetch 속성을 false로 설정하여 거의 방문하지 않는 페이지의 프리패치를 사용 중지하면 됩니다.

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

이 두 번째 예시 앱에서 index.js 페이지에는 <Link>~pineapple-pizza.js이 있고 prefetch은 false로 설정되어 있습니다.

네트워크 활동을 검사하려면 첫 번째 예의 단계를 따르세요. index.js를 로드하면 DevTools 네트워크 탭에 margherita.js가 다운로드되지만 pineapple-pizza.js는 다운로드되지 않는 것으로 표시됩니다.

margherita.js가 강조 표시된 DevTools 네트워크 탭

맞춤 라우팅으로 프리패치

<Link> 구성요소는 대부분의 사용 사례에 적합하지만 라우팅을 실행하는 자체 구성요소를 빌드할 수도 있습니다. Next.js는 next/router에서 사용할 수 있는 라우터 API를 통해 이를 더 쉽게 만듭니다. 새 경로로 이동하기 전에 작업을 실행하려면 (예: 양식 제출) 맞춤 라우팅 코드에서 이를 정의하면 됩니다.

라우팅에 맞춤 구성요소를 사용하는 경우 프리패치를 추가할 수도 있습니다. 라우팅 코드에서 프리패치를 구현하려면 useRouter의 prefetch 메서드를 사용하세요.

이 예시 앱에서 components/MyLink.js를 살펴보세요.

프리패치는 useEffect 후크 내에서 실행됩니다. <MyLink>의 prefetch 속성이 true로 설정되면 해당 <MyLink>이 렌더링될 때 href 속성에 지정된 경로가 미리 가져와집니다.

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

링크를 클릭하면 handleClick에서 라우팅이 실행됩니다. 메시지가 콘솔에 로깅되고 push 메서드가 href에 지정된 새 경로로 이동합니다.

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

이 예시 앱에서 index.js 페이지에는 margherita.js 및 pineapple-pizza.js에 대한 <MyLink>이 있습니다. prefetch 속성은 /margherita에서 true로, /pineapple-pizza에서 false로 설정됩니다.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

index.js를 로드하면 네트워크 탭에 margherita.js가 다운로드되고 pineapple-pizza.js는 다운로드되지 않는 것으로 표시됩니다.

margherita.js가 강조 표시된 DevTools 네트워크 탭

링크를 클릭하면 콘솔에 'Having fun with Next.js'가 기록되고 새 경로로 이동합니다.

&#39;Having fun with Next.js.&#39;라는 메시지를 표시하는 DevTools 콘솔

결론

<Link>를 사용하면 Next.js가 연결된 페이지를 렌더링하는 데 필요한 JavaScript를 자동으로 프리페치하므로 새 페이지로 더 빠르게 이동할 수 있습니다. 맞춤 라우팅을 사용하는 경우 Next.js 라우터 API를 사용하여 직접 미리 가져오기를 구현할 수 있습니다. 거의 방문하지 않는 페이지의 미리 가져오기를 사용 중지하여 불필요한 콘텐츠 다운로드를 방지하세요.