shallow routing

next.js에서 shallow 옵션을 통해 prefeching 하지않고 부드럽게 화면을 전환하는법

import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Current URL is '/'
function Page() {
  const router = useRouter()
 
  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
 
  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}
 
export default Page

Next.js에서 제공하는 Shallow Routing은 클라이언트 측에서 브라우저의 주소 표시줄의 URL을 변경하는 것으로, 새로운 페이지를 가져오지 않고 현재 페이지에서 데이터를 가져오는 기능을 제공합니다. 이를 통해 페이지 이동 시에도 페이지의 초기 데이터를 유지할 수 있으며, 불필요한 서버 요청을 줄일 수 있다.

router.push()기능을 이용해 경로를 이동할 수 있다.

router.push()에 들어가는 파라미터는 (url, as, option)이 있다.

-url : 이동하고자 하는 주소
-as : 브라우저 url바에 표시될 주소, 옵션이므로 사용하지 않아도 무방하다.
-option
:shallow -> 새로고침 없이 url을 바꿔준다.
:getStaticProps, getServerSideProps, getInitialProps를 갖는다.

참고
https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating