Next.js의 prefetching

Prefetching이란?

사용자가 요청하기 전에 미리 데이터를 로드하는 기술이다.

동작 원리

Intersection Observer API를 사용하여 Link가 뷰포트에 들어올 때 해당 페이지를 자동으로 prefetching한다.

Next.js 13에서는 마우스 호버 시 데이터를 받아오는 방법도 추가됐다. 이 방법으로 동적으로 추가된 요소나 빠른 스크롤 때문에 뷰포트 감지가 이루어지지 않는 예외 경우에도 대처할 수 있다.

필요한 상황

Next.js는 SSR의 단점으로 서버에서 HTML 파일을 받아서 렌더링하므로 로딩이 발생한다. 이런 단점을 극복하는 방법 중 하나가 prefetching이다.

Prefetching을 사용하는 예시

1. 페이지 전환 가속화
   링크를 클릭하기 전에 리소스를 미리 로드하는 것.

2. 사용자 행동 예측
   방문할 가능성이 높은 페이지를 미리 로드하는 것.

3. 네트워크 조건 최적화
   사용자의 네트워크 상태가 양호할 때 중요한 리소스를 미리 로드하는 것.

사용법

1. <Link> 컴포넌트

<a> 대신 <Link>를 사용하면 자동으로 prefetching이 동작한다.

속성

• href (필수)

  • 이동할 페이지 주소: href="/dashboard"

• prefetch

  • 기본값: true
  • prefetching 활성화를 선택할 수 있다.

• scroll

  • 기본값: true
  • 페이지 이동 후 스크롤이 최상단으로 위치한다.

• replace

  • 기본값: false
  • URL 히스토리에 쌓이지 않고 대체된다.
  • 예시 1: 뒤로가기를 눌렀을 때 돌아갈 필요가 없는 페이지 (예: 결제 완료 후 결제 페이지로 다시 돌아갈 필요 없음)
  • 예시 2: 검색 필터를 실행한 경우, 뒤로가기를 눌러서 이전의 필터로 되돌릴 필요 없음

2. useRouter Hook

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    router.prefetch("/about");
  }, [router]);

  return <div>My Component</div>;
};

페이지 전환 시 router 객체가 변환된다. router가 변화를 감지하여 특정 주소의 페이지를 prefetching한다.

수동으로 prefetching이 필요한 상황

• 수동으로 prefetching을 설정하는 이유
  • 자주 사용될 페이지를 미리 예측하거나, 불필요한 행동을 제거하여 최적화를 도모하기 위함이다.
• 폼 제출 후 리다이렉션
  • 선행 조건을 트리거로 지정하는 방식이다.
  • 폼을 제출하면 자동으로 페이지가 이동하는 구조일 때, 반드시 해당 페이지로 이동할 것으로 예측 가능하므로 prefetching하여 최적화한다.
  • 만약 폼 입력 페이지에 왔다가 제출하지 않고 떠난다면 prefetching은 필요 없다. Link 컴포넌트로 구현했다면 불필요한 prefetching이 발생하게 된다.