Next.js) Prefetch에 대한 이해

1) 컨텐츠 로드에 대한 이해. 

= 번들링된 파일을 브라우저를 통해 가져온다. 가져오기 위해 네트워크 시간 비용이 발생한다. 이를 해결하기 위해 prefetch가 존재한다.

 

2) Link태그와 router를 이용한 네비게이팅을 Prefetch 하는 방법

---

 

 

---

 

[Prefetch를 통해 번들링을 미리 불러오는 모습]

 

search, book, index에 대한 번들링 파일들을

 

랜딩페이지에 가기만해도 불러온다.

 

Link태그의 prefetch의 default 값은 true 라서

다 불러온다. 

 

---

[router.push를 prefech로 해보기]

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

 

router.prefetch를 이용해 

마운트 되자마자 호출해놓으면 

번들링을 가져온다