Nextjs - Link 태그의 Prefetch 기능

개인프로젝트를 Open API를 사용하여 만들고 있던 도중 나의 코드엔 문제가 없는데 자꾸 데이터가 오류가 나는 현상이 발생했다...

(이 현상때문에 3일을 삽질했다..)

 

개발자 도구탭을 열어보니 Next의 Link태그로 만든 컴포넌트에 마우스 호버를 하기만 해도 fetch 요청이 가는 것이 확인되었다.

정말 미스테리했다. 내가 호버한곳에서 데이터요청은 param에서 id값을 매게 변수로 삼아 데이터를 fetch 해야 하는데 어떻게 요청이 가는 거지..? 심지어 상태코드도 200으로 응답이 잘 오는 것이었다. 또한 페이지 이동시 요청이 아예 안 가고 있다..

이 현상 때문에 화면에 마우스를 휙휙 휘저으면 내가 사용하던 Open API는 RateLimit을 뱉어버려 나의 코드들이 제대로 작동하지 않는 것이었다.

 

(내가 사용하던 OPEN API는 초당 5회 요청을 넘기면 ratelimit이 발생)

 

나는 Next의 공식문서 및 구글링을 해본 결과 Link 태그엔 "prefetch"라는 기능이 있다는 것을 알게 되었다.

 

prefetch 란 Next에서 제공하는 Link컴포넌트를 사용할 경우 기본적으로 적용되어 있으며 유저가 Link 부분을 hover 하기만 해도 넘어갈 페이지의 데이터를 fetch 해와서 미리 렌더링 해둔다. 그다음 유저가 그곳을 누르면 바로 화면을 보여준다.

 

이 기능 때문에 Nextjs에서 SSR를 사용함에도 불구하고 빠르게 페이지이동이 가능한 것 같다. 하지만 위와 같은 사례로 서버에 과부하가 발생하여 데이터가 제대로 받아오질 못하는 불상사가 생길 수도 있다. 

 

하지만 prefetch 기능을 false로 변경하고 나니 확실히 페이지 이동 간 속도가 느려졌다.. 해결방법을 찾아야 할 것 같다.

 

 <Link
          passHref
          prefetch={false}
          href={`/collection/${opensea_slug}`}
          className="flex items-center w-full space-x-4"
        >

Link 컴포넌트의 prefetch 컴포넌트 기능을 끄는걸로 해결했다.