[코드캠프 4주차]Shallow Routing

Shallow Routing 은 getServerSideProps, getStaticProps, getInitialProps 과 같은 데이터 fetching 서버 사이드 렌더링 메서드를 다시 실행하지 않고 URL 을 바꿔주는 라우팅이다.
Shallow 라우팅을 사용해 URL 을 업데이트 하면 pathname, query 값의 상태를 잃지 않고 Router 객체를 통해 받을 수 있게 된다.

즉 불필요한 서버 연산을 최소화 하고 필요한 상태 값(pathname, query)을 라우터에 넣어서 전달하게 되는 것이다.

Shallow 라우팅을 적용하려면 아래와 같이 작성하면 된다.

import { useEffect } from 'react'
import { useRouter } from 'next/router'

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