Next.js가 경로 미리 가져오기를 통해 탐색 속도를 높이는 방법과 이를 맞춤설정하는 방법을 설명합니다.
학습 내용
이 게시물에서는 Next.js의 라우팅 기능, 속도 최적화 방법 및 필요에 맞게 라우팅을 맞춤설정하는 방법을 알아봅니다.
<Link>
구성요소
Next.js에서는 라우팅을 수동으로 설정할 필요가 없습니다.
Next.js는 파일 시스템 기반 라우팅을 사용하므로 ./pages/
디렉터리 내에 파일과 폴더를 만들 수 있습니다.
다른 페이지에 연결하려면 기존의 <a>
요소를 사용하는 방법과 유사하게 <Link>
구성요소를 사용하세요.
<Link href="/margherita">
<a>Margherita</a>
</Link>
탐색을 위해 <Link>
구성요소를 사용하면 Next.js가
약간의 작업을 자동으로 처리합니다. 일반적으로 링크를 따라가면 페이지가 다운로드되지만 Next.js는 페이지를 렌더링하는 데 필요한 자바스크립트를 자동으로 미리 가져옵니다.
몇 개의 링크가 포함된 페이지를 로드할 때는 링크를 따라갈 때 그 뒤에 있는 구성요소를 이미 가져왔을 가능성이 높습니다. 이렇게 하면 새 페이지로 더 빠르게 이동하여 애플리케이션 응답성이 향상됩니다.
아래의 예시 앱에서 index.js
페이지는 <Link>
가 있는 margherita.js
에 연결됩니다.
Chrome DevTools를 사용하여 margherita.js
를 미리 가져왔는지 확인합니다.
1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.
캐시 사용 중지 체크박스를 선택합니다.
페이지를 새로고침합니다.
index.js
를 로드하면 네트워크 탭에 margherita.js
도 다운로드되었다고 표시됩니다.
자동 미리 가져오기 작동 방식
Next.js는 표시 영역에 표시되는 링크만 미리 가져오고 IntersectionObserver 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
페이지에 prefetch
가 false
로 설정된 <Link>
~pineapple-pizza.js
가 있습니다.
네트워크 활동을 검사하려면 첫 번째 예의 단계를 따르세요. index.js
를 로드하면 DevTools 네트워크 탭에 margherita.js
가 다운로드되었다고 표시되지만 pineapple-pizza.js
는 다운로드되지 않습니다.
맞춤 라우팅으로 미리 가져오기
<Link>
구성요소는 대부분의 사용 사례에 적합하지만, 라우팅을 실행할 자체 구성요소를 빌드할 수도 있습니다. Next.js는 next/router
에서 제공되는
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
는 다운로드되지 않았다고 표시됩니다.
두 링크 중 하나를 클릭하면 콘솔에서 'Having good with Next.js.'를 기록하고 새 경로로 이동합니다.
결론
<Link>
를 사용하면 Next.js가 링크된 페이지를 렌더링하는 데 필요한 자바스크립트를 자동으로 미리 가져오므로 새 페이지로 더 빠르게 이동할 수 있습니다. 커스텀 라우팅을 사용하는 경우 Next.js Router API를 사용하여 미리 가져오기를 구현할 수 있습니다. 거의 방문하지 않는 페이지의 미리 가져오기를 사용 중지하여 불필요하게 콘텐츠를 다운로드하지 않도록 합니다.