2023-09-23 15:19

[Next Js] Prefetching

Next js에서는 Prefeching이라는 것을 제공한다.

Prefetching이란 유저가 그 route를 방문하기 전에 백그라운드에서 미리 route를 load하는 과정이다.

Next js에서 prefetch되는 두 가지 경우가 있다.

<Link> component
Link가 user의 viewport에 보일 때 자동으로 prefetch된다. prefetching은 page가 첫번째 load되거나 scrolling을 통해 보여질 때 일어난다.
router.prefetch()
useRouter 훅에서 사용될 수 있다

우리 inforum 사이트 /memos 페이지에 memo card들이 나열되어 있는데 memo card는 <Link> component로 감싸져 있다.

그래서 <Link> component가 자동으로 prefetched되는 특성 때문에 /memos 페이지에서 스크롤링을 할 때마다 prefetch를 하고 있었다.

이 경우는 불필요한 prefetch를 많이 하기 때문에 prefetch를 disable하는 작업이 필요했다.

마침 <Link> component에서 prefetch 옵션을 제공해주고 있었다.

그래서 다음과 같이 prefetch={false} 옵션을 추가해주었다.

<Link href={`/memos/${memoId}`} className="w-full flex-1 " prefetch={false}>
    ....
</Link>

next.js

prefetch