shallow routing

Shallow routing 얕은 라우팅

Shallow routing은 getServerSideProps, getStaticProps, getIntialProps 등의 데이터를 가져오는 메소드를 다시 작동시키지 않고 URL을 변경 시켜준다. 라우터 객체를 통해서 손실 없이 pathname, query를 받을 수 있다.

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', null, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

 

이렇게 되면 브라우저 주소는 /?couter=10 으로 변하지만 라우트의 상태만 변할 뿐이고 페이지는 대체되지 않는다. 얕은 라우팅은 같은 페이지 URL 내에서만 작동한다. shallow: true 라도 파라미터가 바뀐 게 아니고, 페이지 자체가 바뀌었으면 현재페이지를 unload하고 새 페이지를 load하는 과정에서 getInitalProps 부분이 실행된다고 한다.

 

포스팅 회고

shallow routing을 알기 위해서는 routing에 깊이 있는 공부가 필요해 보인다. 이전에 정적 라우팅, 동적 라우팅에 대해서만 간단히 공부하고 그 이후로 알아본 것들이 없다. shallow routing이란 게 주소 이동으로 보이지만 그대로 페이지를 보여주는 눈속임 느낌인데 내가 이해한 게 맞는지 알기 어렵다. 이를 이용하면 어째거나 이전에 한 페이지에 여러 요소들을 보여주는 것들에 있어서 주소를 구분하여 사용자가 어떤 요소를 보고 있는지 추적이 가능할 지 모르겠다.

 

참고한 글

https://birdmee.tistory.com/7

[내보내번] Next.js docs - Routing

https://velog.io/@baramofme/Next.js-%EA%B3%B5%EC%8B%9D-Docs-%ED%9D%9D%EA%B8%B0

Next.js 공식 Docs 흝기