반응형
next.js 공식문서에 따르면, Shallow routing을 사용하여 url을 데이터 fetching 없이 바꿀 수 있다고 한다.
shallow routing을 사용하기 위해, shallow option을 true로 설정해야 한다.
공식문서를 그대로 따라가보자
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
위의 코드가 작성된 페이지가 렌더링되자마자 useEffect가 실행되고 url이 변화한다. 보통 router.push에 의해 url이 변화하면 페이지가 이동되지만, shallow : true 때문에 data fetching 없이 url만 변한다.
실험해보자.
먼저 공식문서처럼 따라친 useEffect를 주석처리하고 페이지 주소창을 보자.(다른건 볼 필요 없음)
그냥 평범한 url이다.
이번엔 내가 원하는대로 url을 바꿔보자. 페이지 이동없이!
공식문서에 소개된 useEffect와 거의 흡사하게 작성하였다.
맨 마지막 url에 model=bmw가 붙도록 해보자.
페이지 이동시 model=bmw 가 url에 붙는다.
입사하기전에는 몰랐는데, 마케팅측면에서 혹은 보안측면에서도 url이 중요한 역할을 함을 알게 되었다.(정확히는 모르지만 url관련 이슈들을 몇번 봤음)
그래서 이 내용이 도움이 될 진 모르지만 우선 공부했다.
참고문서
https://kyounghwan01.github.io/blog/React/next/getInitialProps/#context-object
https://nextjs.org/docs/routing/shallow-routing
반응형
'개발 > Next.js' 카테고리의 다른 글
globalStyle 때문에 ol태그가 적용 안될 때 (0) | 2022.05.26 |
---|---|
Next.js "Reference Error: document is not defined" (0) | 2022.03.02 |
Warning : Props 'className' did not match client: server: (0) | 2022.02.07 |
getServerSideProps (0) | 2022.01.30 |
Custom App Component (.pages/_app.js) (0) | 2022.01.29 |