이전 useEffect글과 연관되어 있는 shallow routing에 대해 살펴보자!

1. shallow routing이란?

shallow routing은 데이터를 가져오는 method를 다시 사용하지 않고 url 변경을 가능하도록 해주는 Next.js의 기능이다.
shallow routing을 사용하기 위해서는 shallow routing 옵션을 true로 설정해줘야 한다.

2. shallow routing 살펴보기

1) router.push ( )

router.push(url, as, options)

(1) url

이동하고자 하는 주소

(2) as

브라우저 url 바에 표시될 주소 (옵션이므로 사용하지 않아도 된다!)

(3) options

shallow routing을 살펴보고 있는 바, options에서 shallow를 true로 설정해주면 된다.

2) shallow routing

useEffect 안에 "shalllow: true" 옵션을 줌으로써 페이지 교체 없이 자동으로 업데이트 되고 경로 상태만 변경된다.

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


export default function Page() {
  const router = useRouter()

  useEffect(() => {
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
  }, [router.query.counter])
}

shallow routing은 현재 페이지의 url 변경에 대해서만 작동한다. 따라서 새로운 페이지에 대해 shallow routing을 요청할 경우 사용할 수 없다.

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


export default function Page() {
  const router = useRouter()

  useEffect(() => {
    router.push('/?counter=10', '/about?counter=10', { shallow: true })
  }, [])

  useEffect(() => {
  }, [router.query.counter])
}

<참조 : https://nextjs.org/docs/routing/shallow-routing>