🚀 속도에 진심인 Next.js 프로젝트 NextFaster 파헤치기

얼마 전, 유튜브를 통해 흥미로운 프로젝트 하나를 발견했습니다. 바로 NextFaster라는 프로젝트인데요, 이름에서 느껴지듯이 오로지 하나의 목표를 향해 달리고 있었습니다.

"어떻게 하면 Next.js 애플리케이션을 가장 빠르게 만들 수 있을까?"

이 프로젝트는 Next.js 15를 기반으로, 인프라 비용이나 리소스 사용량보다는 오로지 '속도'라는 하나의 가치에 모든 초점을 맞추고 있습니다. 어떻게 하면 사용자에게 가장 빠른 경험을 제공할 수 있을지, 그 극한의 최적화를 추구했죠. 특히 두 가지 전략이 눈에 띄었습니다.

1. Aggressive Prefetching: "방문할 것 같은 페이지는 전부 미리 가져온다"

Next.js에서는 Link 컴포넌트를 통해 기본적인 프리패칭을 제공합니다. 하지만 Next.js의 기본 Link 컴포넌트를 확장한 커스텀 컴포넌트를 사용하여 더욱 적극적인 프리패칭 전략을 구현했습니다.

//src/components/ui/link.tsx

// 이미지 프리패치 함수
async function prefetchImages(href: string) {
  // 외부 링크나 특정 경로(/order, /)는 프리패치 제외
  if (!href.startsWith("/") || href.startsWith("/order") || href === "/") {
    return [];
  }
  
  // API를 통해 이미지 정보 가져오기 (낮은 우선순위로 요청)
  const url = new URL(href, window.location.href);
  const imageResponse = await fetch(`/api/prefetch-images${url.pathname}`, {
    priority: "low",
  });
  
  const { images } = await imageResponse.json();
  return images as PrefetchImage[];
}

// 이미 프리패치된 이미지 추적을 위한 Set
const seen = new Set<string>();

export const Link: typeof NextLink = (({ children, ...props }) => {
  const [images, setImages] = useState<PrefetchImage[]>([]); // 프리패치할 이미지 목록
  const [preloading, setPreloading] = useState<(() => void)[]>([]); // 현재 프리로딩 중인 이미지들의 cleanup 함수
  const linkRef = useRef<HTMLAnchorElement>(null); 
  const router = useRouter();
  let prefetchTimeout: NodeJS.Timeout | null = null; // 프리패치 타이머 ID

  useEffect(() => {
    // prefetch prop이 false면 프리패치 비활성화
    if (props.prefetch === false) {
      return;
    }

    const linkElement = linkRef.current;
    if (!linkElement) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          // 링크가 뷰포트에 보이면 300ms 후 프리패치 시작
          prefetchTimeout = setTimeout(async () => {
            router.prefetch(String(props.href));
            await sleep(0); // 문서 프리패치가 먼저 일어나도록 지연
            void prefetchImages(String(props.href)).then((images) => {
              setImages(images);
            }, console.error);
            observer.unobserve(entry.target);
          }, 300);
        } else if (prefetchTimeout) {
          // 링크가 뷰포트에서 사라지면 프리패치 취소
          clearTimeout(prefetchTimeout);
          prefetchTimeout = null;
        }
      },
      { rootMargin: "0px", threshold: 0.1 } // 10% 이상 보이면 활성화
    );

    observer.observe(linkElement);

    return () => {
      observer.disconnect();
      if (prefetchTimeout) {
        clearTimeout(prefetchTimeout);
      }
    };
  }, [props.href, props.prefetch]);

  return (
    <NextLink
      ref={linkRef}
      prefetch={false} // 기본 프리패치 비활성화 (useEffect 내부 커스텀 구현 사용)
      onMouseEnter={() => {
        // 마우스가 링크 위로 오면 즉시 프리패치
        router.prefetch(String(props.href));
        if (preloading.length) return;
        const p: (() => void)[] = [];
        for (const image of images) {
          const remove = prefetchImage(image);
          if (remove) p.push(remove);
        }
        setPreloading(p);
      }}
      onMouseLeave={() => {
        // 마우스가 떠나면 프리로딩 취소 및 정리
        for (const remove of preloading) {
          remove();
        }
        setPreloading([]);
      }}
      onMouseDown={(e) => {
        // 내부 링크일 경우 기본 동작 방지 및 라우터 사용
        const url = new URL(String(props.href), window.location.href);
        if (
          url.origin === window.location.origin &&
          e.button === 0 &&          // 좌클릭만
          !e.altKey &&               // 수정자 키 없이
          !e.ctrlKey &&
          !e.metaKey &&
          !e.shiftKey
        ) {
          e.preventDefault();
          router.push(String(props.href));
        }
      }}
      {...props}
    >
      {children}
    </NextLink>
  );
}) as typeof NextLink;

// 개별 이미지 프리패치 함수
function prefetchImage(image: PrefetchImage) {
  // lazy 로딩이거나 이미 프리패치된 이미지는 스킵
  if (image.loading === "lazy" || seen.has(image.srcset)) {
    return;
  }
  
  // 새 이미지 객체 생성 및 설정
  const img = new Image();
  img.decoding = "async";           // 비동기 디코딩
  img.fetchPriority = "low";        // 낮은 우선순위로 가져오기
  img.sizes = image.sizes;
  seen.add(image.srcset);           // 중복 프리패치 방지
  img.srcset = image.srcset;
  img.src = image.src;
  img.alt = image.alt;
  
  let done = false;
  // 로드 완료 또는 에러 시 완료 표시
  img.onload = img.onerror = () => {
    done = true;
  };
  
  // cleanup 함수 반환
  return () => {
    if (done) return;
    img.src = img.srcset = "";      // 로드 취소
    seen.delete(image.srcset);      // Set에서 제거
  };
}

이 커스텀 Link 컴포넌트는 단순히 페이지 콘텐츠뿐만 아니라, 해당 페이지에 있는 이미지들까지 미리 가져옵니다. IntersectionObserver를 사용해 뷰포트에 링크가 10%만 보여도 말이죠. 마치 "이 링크가 조금이라도 보이네? 그럼 미리 가져와야지!"라는 느낌입니다.

하지만 무작정 가져오지는 않습니다. 300ms의 지연 시간을 두어 불필요한 프리페칭을 방지하고, 사용자가 마우스를 링크에서 떼면 즉시 프리페칭을 취소합니다. 또한 seen이라는 Set 객체를 사용해 이미 프리패치된 이미지는 다시 가져오지 않도록 하고, lazy loading이 설정된 이미지는 프리페칭에서 제외시킵니다. 모든 이미지는 fetchPriority: "low"로 설정되어 중요한 리소스의 로딩을 방해하지 않도록 했습니다.

2. Aggressive Caching: "한 번 가져온 데이터는 다시 요청하지 않는다"

먼저 모든 다이나믹 경로에 generateStaticParams를 활용해 빌드 타임에 가능한 경로를 미리 생성했습니다.

export async function generateStaticParams() {
  return await db.select({ collection: collections.slug }).from(collections);
}

여기에 더해 Next.js의 unstable_cache와 React의 cache를 결합한 전략이 특히 인상적이었습니다.

export const unstable_cache = <Inputs extends unknown[], Output>(
  callback: (...args: Inputs) => Promise<Output>,
  key: string[],
  options: { revalidate: number },
) => cache(next_unstable_cache(callback, key, options));

React의 cache로 메모리 내 중복 요청을 방지하고, Next.js의 unstable_cache로 영구적인 데이터 캐싱을 구현했습니다.

결과적으로? 런타임에서 발생하는 불필요한 데이터베이스 쿼리가 없습니다. 모든 것이 미리 준비되어 있고, 캐시되어 있고, 최적화되어 있는 거죠.

마무리

성능 최적화를 위해 수많은 프리패치 요청을 생성하는 접근 방식은 비용 측면에서 실무에 적용하기는 어렵겠지만, 오로지 '속도'만을 위해 만들어진 재미있는 프로젝트였습니다.

프로젝트 코드를 구경하며 Route Segment Config(ex: dynamic = 'force-static')가 페이지나 레이아웃 파일에서만 사용 가능하다고 알고 있었는데, route handler에서도 활용할 수 있다는 것을 알게되었습니다.

또한 React의 cache와 Next.js의 unstable_cache에 대해서도 다시 한 번 학습할 수 있었습니다. 처음에는 unstable_cache가 내부적으로 React의 cache를 사용할 것이라 생각했지만, 실제로는 완전히 다른 동작 방식을 가진 별개의 기능이라는 것을 알게 되었습니다.
(unstable_cache는 이미 legacy API가 되었으며, use cache 사용을 권장)

참고

https://github.com/ethanniser/NextFaster
https://www.youtube.com/watch?v=7bfTpZxRGto