[Next.js] prefetching이 잘 되었는지 확인하는 방법

Next.js를 활용해 프로젝트를 진행하며 캘린더 UI에 필요한 초기값을 prefetch 해두었는데 잘 되었는지 확인하고 싶어 알아보았다

방법은 간단하다!

 

네트워크 요청에대한 응답 확인하기

url로 어떤 페이지에 접속하는 것은 결국 그 페이지를 달라고 요구하는 get 요청을 하는 것이다

따라서 그 요청의 응답값에 데이터가 잘 들어와있는지 확인하면 된다!

 

위 이미지 속 일정 정보들은 모두 prefetch로 받아둔 값이다

페이지를 받아온 후 fetch 요청을 한 결과가 아니라 schedule 페이지 요청에 대한 응답에 처음부터 포함이 되어있었다는 것이므로, prefetch가 잘 이루어졌다는 것을 확인할 수 있다

 

 

데이터 출력해보기

위 방법과 같은 개념이다

페치된 데이터를 출력해보았을 때, 페이지를 받아온 후 비동기 작업으로 데이터를 받아왔다면 데이터를 받아오는 작업이 마무리되기 전까지 데이터 출력시 undefined가 출력되어야한다.

하지만 클라이언트 컴포넌트인 Calendar에서 처음부터 데이터가 출력되고 있으므로 prefetch로 값을 잘 받아왔다는 것을 확인할 수 있다!