Next.js 13 - next/script & getStaticPaths

thumbzzero·2023년 6월 29일

next/script

https://nextjs.org/docs/app/api-reference/components/script

onLoad vs. onReady
onLoad : 스크립트가 로딩되었을 때 한 번 실행
onReady : 스크립트가 로딩되었을 때 뿐만 아니라 next/script가 있는 컴포넌트가 마운트될 때마다 실행

strategy 속성

  • beforeInteractive : afterInteractive보다 빠르게 스크립트를 가져와야 하는 경우(모든 페이지에서 전역적으로 사용할 경우에만 권장 - pages/_document.js => pages/_app.js and pages/_document.js have been replaced with a single app/layout.js root layout.)
  • afterInteractive : (default) 페이지가 로드되자마자 보여야 하는 경우
  • lazyOnload : 조금 느려도 되는 스크립트에 사용
  • worker : (experimental) Load in a web worker.

getStaticPaths

페이지의 경로를 정적으로 생성해둠 (빌드할 때 필요한 모든 경로에 대해서 페이지를 미리 프리렌더링)

getStaticProps와 함께 써야 함

fallback 속성

  • false : 빌드 타임에 모든 경로를 만들고 만약 찾을 수 없는 경로에 도달한다면 바로 404 페이지를 띄움
  • true : 빌드 타임에 경로 생성하지만 존재하지 않는 경로에 접근하더라도 '바로' 404 페이지 띄우지 않음(getStaticProps 호출 후 이동)
  • 'blocking' : true와 비슷하게 동작, getSTaticProps가 끝날 때까지 기다림

0개의 댓글