Next.js가 경로 미리 가져오기를 통해 탐색 속도를 높이는 방법과 이를 맞춤설정하는 방법을 설명합니다.
학습 내용
이 게시물에서는 Next.js에서 라우팅이 작동하는 방식, 속도에 맞게 최적화하는 방법, 요구사항에 가장 적합하게 맞춤설정하는 방법을 알아봅니다.
<Link> 구성요소
Next.js에서는 라우팅을 수동으로 설정할 필요가 없습니다.
Next.js는 파일과 폴더만 만들 수 있는 파일 시스템 기반 라우팅을 사용합니다.
./pages/ 디렉터리 내에서 다음을 실행합니다.
다른 페이지로 연결하려면
<Link> 구성요소를 설치합니다.
다음과 같이 이전의 좋은 <a> 요소를 사용합니다.
<Link href="/margherita">
<a>Margherita</a>
</Link>
탐색에 <Link> 구성요소를 사용하면 Next.js가 약간의 작업을 실행합니다.
확인할 수 있습니다 일반적으로 페이지의 링크를 클릭하면 페이지가 다운로드되지만
Next.js는 페이지를 렌더링하는 데 필요한 JavaScript를 자동으로 미리 가져옵니다.
링크가 몇 개 포함된 페이지를 로드할 때는 내가 팔로우하는 시점이 그 뒤에 있는 구성요소를 이미 가져온 것입니다. 이렇게 하면 애플리케이션 응답성을 향상시키는 데 도움이 됩니다.
아래 예제 앱에서는 index.js 페이지가 margherita.js
<Link>:
Chrome DevTools를 사용하여 margherita.js를 미리 가져왔는지 확인합니다.
1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다.
- `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.
캐시 사용 중지 체크박스를 선택합니다.
페이지를 새로고침합니다.
index.js를 로드하면 네트워크 탭에 margherita.js가
다운로드도:
자동 미리 가져오기의 작동 방식
Next.js는 표시 영역에 나타나는 링크만 미리 가져오고 교차로
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>가 있습니다.
prefetch가 false로 설정된 pineapple-pizza.js:
네트워크 활동을 검사하려면 첫 번째 예시의 단계를 따르세요. 날짜
index.js를 로드하면 DevTools Network 탭에 margherita.js이
다운로드되었지만 pineapple-pizza.js는 다운로드되지 않았습니다.
커스텀 라우팅으로 미리 가져오기
<Link> 구성요소는 대부분의 사용 사례에 적합하지만 직접 빌드할 수도 있습니다.
라우팅을 수행할 자체 구성요소가 필요합니다. Next.js를 사용하면
라우터 API를 next/router에서 사용할 수 있습니다.
새 탭으로 이동하기 전에 무언가를 하려는 경우 (예: 양식 제출)
커스텀 라우팅 코드에서 정의할 수 있습니다.
라우팅에 맞춤 구성요소를 사용할 때 미리 가져오기를 추가할 수도 있습니다.
라우팅 코드에서 미리 가져오기를 구현하려면 prefetch 메서드를 사용합니다.
useRouter입니다.
다음 예시 앱에서 components/MyLink.js를 살펴보겠습니다.
미리 가져오기는
useEffect 후크 만약
prefetch 속성이 <MyLink>에 지정된 경로인 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에 대한 <MyLink>가 있고
pineapple-pizza.js입니다. /margherita에서 prefetch 속성이 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은 다음 항목이 아님:
두 링크 중 하나를 클릭하면 콘솔에 'Next.js로 즐기기'가 기록됩니다. 새 경로로 이동합니다.
결론
<Link>를 사용하면 Next.js가 자동으로
연결된 페이지를 렌더링하여 새 페이지로 더 빠르게 이동할 수 있습니다. 만약
Next.js Router API를 사용하여
미리 가져오는 것입니다. 사용 중지하여 불필요하게 콘텐츠를 다운로드하는 것을 방지하세요.
프리페치 기능이 있습니다.