Next.js를 통해 prefetch 최적화 기법 이해하기(feat.next/link)

• 프로젝트: 공우 홈페이지
• 키워드: prefetch, Link, SSR, SSG, CSR, Next.js, Chrome DevTools Network
• 상황
  1. Next.js가 최초 진입한 페이지의 html파일만 가져온다는 사실은 알고 있었지만, 다른 페이지로 이동할 때 어떤 데이터가 언제 불러와지는지 정확히 알진 못했다.
  2. Next.js로 구현한 공우 홈페이지에서 Chrome Devtools Network 탭을 통해 궁금증을 해소하고자한다.
• 해결과정
  1. 먼저 공우 홈페이지에 들어가 network 탭에서 Doc 파일을 확인한다.
     

     

     chrome devtools network tabㅇ

     
     역시 최초 진입한 페이지의 html만 가져오고, 다른 페이지로 이동하여도 추가적인 html 요청은 없다.
     
     
     
  2. 다른 페이지에 대한 정보를 언제 가져오는지 알기위해 Fetch/XHR과 JS 탭을 확인한다.
     

     

     Fetch/XHR tab

     

     JS tab

     
     최초 페이지에 진입하고 바로, 다른 페이지에 필요한 json과 js파일들을 모두 불러온다.
     
     즉 최초 페이지는 SSG(또는 SSR)이라 html 파일을 받아와 FCP를 빠르게 하고, 다른 페이지들은 미리 js를 불러와두어 page routing을 할 때 CSR로 동작해 페이지 전환 속도까지 빠르게 한 것이다.
     
     
  3. Next.js의 페이지 로드 속도가 빠른 이유는 알았으니 언제 해당 데이터들을 요청하는지 알아보고자 한다. Next Link에 대한 공식 문서를 읽어보아야한다.
     https://nextjs.org/docs/api-reference/next/link
     Link 컴포넌트에 prefetch prop이 있고 default값은 true이다. 이 경우 viewport에 Link가 있을 경우 해당 url에 대한 js와 json data를 요청하는 것이다. 이때, SSG일 경우 미리 계산된 json data를 받아올 수 있지만 SSR일 경우에는 받아올 수 없다(SSR은 페이지 요청 시에 data를 요청하기 때문에).
     
     
  4. Link 컴포넌트를 쓰지않고 react/router를 이용하여 라우팅할 때에도 prefetch 기법을 이용할 수 있다.
     https://nextjs.org/docs/api-reference/next/router#routerprefetch
     

       router.prefetch(url, as)

     
     위와 같이 이동할 url에 대해 미리(ex> mounted 시점) prefetch를 해두면 실제로 'router.push(url)'를 할 때 Link 컴포넌트를 사용한 것과 같이 동작할 수 있다.
• 의의
  1. image source를 prefetch하여 UX를 개선한 경험은 있었는데, 프레임워크 수준에서 페이지를 prefetch하는 기법도 학습할 수 있었다.