[Next] 프리페칭(Pre-fetching)

☑️ Next.js의 사전 렌더링과 Pre-Fetching 기능 이해

✔️ 서버에서 브라우저로 필요한 JavaScript 번들만 전달

Next.js는 페이지 요청 시, 해당 페이지에 필요한 JavaScript 번들만 서버에서 브라우저로 전달한다. 이렇게 전달하는 이유는 초기 페이지 로딩 속도를 높이고, 전달되는 JavaScript 코드의 양을 줄여 수화(Hydration) 과정과 TTI(Time to Interactive) 시간을 최적화하기 위해서이다.

 

만약 모든 페이지의 JavaScript를 한 번에 전달하면 브라우저가 처리해야 할 코드가 많아져 초기 로딩과 수화 과정이 지연될 수 있다. 이를 방지하기 위해, Next.js는 각 페이지에 맞는 JavaScript만 번들로 전송하여 페이지 로딩 속도를 개선한다.

 

👇 렌더링 과정에 대해 이해하고 싶다면 이전 포스팅에 적어두었으니 참고하자!

2024.11.05 - [Next] - [Next] Next.js 소개 & 렌더링 방식의 차이

 

🤔 그렇다면 이후의 페이지 이동 요청을 보낼때 다시 서버에서 페이지에 맞는 JavaScript bundle 과정을 거쳐야할까? 생각해보면 매번 요청때마다 서버에서 자바스크립트 코드를 보내면 페이지 이동이 느려지고 비효율적인 것 같다.

✔️ 페이지 이동 시 필요한 JavaScript 전달 방식

초기 접속 후 새로운 페이지로 이동할 때마다 서버에서 해당 페이지의 JavaScript를 다시 전송하는 것은 비효율적이다. 이런 비효율을 해결하기 위해 Next.js는 Pre-Fetching 기능을 제공한다.

✔️ Pre-Fetching의 적용 방식

Pre-Fetching 이란 현재 사용자가 보고 있는 웹페이지에서 링크, 버튼이 존재해서 이동할 수 있는 가능성이 있는 모든 페이지들의 자바스크립트 코드를 미리 불러오는 과정이다.
초기 접속이 완료된 이후 페이지 이동 요청이 일어나기 전에 프리패칭이 발생해서 모든 페이지들의 자바스크립트 코드를 사전에 불러온다. 따라서 페이지 이동 시 서버에 추가적인 데이터를 요청할 필요가 없다.

Next.js의 <Link> 컴포넌트를 사용한 페이지 이동 링크에는 자동으로 Pre-Fetching이 적용된다. 그러나 <button> 클릭을 통해 프로그래밍적으로 페이지 이동을 설정한 경우에는 Pre-Fetching이 자동으로 이루어지지 않는다. 이때는 router.prefetch() 메서드를 사용하여 수동으로 Pre-Fetching을 설정할 수 있다.

import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Page() {
  const router = useRouter();

  const onClickButton = () => {
    router.push("/test");
  };

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

  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        <Link href={"/search"}>search</Link>
        <Link href={"/book/1"}>book1</Link>
        <div>
          <button onClick={onClickButton}>/test 페이지</button>
        </div>
      </header>
    </>
  );
}

위 예제에서 /test 페이지로 이동하는 버튼의 Pre-Fetching을 위해 router.prefetch("/test") 메서드를 사용하였다. 이를 통해 사용자가 버튼을 클릭하여 페이지를 이동할 때, 추가적인 서버 요청 없이 빠르게 이동할 수 있다.

 

💡 이와 같이 Next.js의 사전 렌더링과 Pre-Fetching 기능을 통해 사용자에게 더 빠르고 매끄러운 경험을 제공할 수 있다.