[NextJS] link

이슈

• NextJS의 ‘Link’ vs ‘router.push(… , {shollow: true})’
• 각각의 역할?
• 어떤 것을 사용해야할지?

참고

• https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating
• https://nextjs.org/docs/pages/api-reference/functions/use-router
• https://velog.io/@hamjw0122/Next.js-Next.js의-Route-System
• router.push vs Link
  • https://jikor1st.tistory.com/19
• https://velog.io/@tykim1227/Next.js-Link-Route

 

개념

Prefetch

• prefetch 속성은 백그라운드에서 페이지를 미리 가져와 뷰포트에 있는 모든 항목을 미리 로드.
• 기본값: true

Shallow Routing

• 새로고침 없이 Url을 불러올 수 있는, Next JS가 제공하는 기능.
• getStaticProps, getServerSideProps, getInitialProps를 실행하지 않고 현재 페이지의 경로만을 업데이트.
• 기본값: false

 

router.push() 용법

router.push(url, undefined, { shallow: true })

 

<Link /> 용법

 <Link href="/" shallow={true}>