shallow routing

https://nextjs.org/docs/routing/shallow-routing

getServerSideProps얕은 라우팅을 사용하면 , getStaticProps및 를 포함하는 데이터 가져오기 메서드를 다시 실행하지 않고도 URL을 변경할 수 있습니다 getInitialProps.

상태를 잃지 않고 객체 ( 또는 에 의해 추가됨) 를 통해 업데이트 pathname되고 수신됩니다.queryrouteruseRouterwithRouter

결국 현재 url의 자원을 변경?하지 않고 담아 놓는다? 이말인거 같습니다.. 어우,,.

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

얕은 라우팅을 활성화하려면 shallow옵션을 로 true로 설정해야 한다고 합니다.
/?counter=10. 페이지는 교체되지 않고 경로의 상태만 변경된다고합니다.

getServerSideProps

페이지에서 (서버 측 렌더링) 이라는 함수를 내보내는 경우 getServerSidePropsNext.js는 에서 반환된 데이터를 사용하여 각 요청에서 이 페이지를 미리 렌더링합니다 getServerSideProps.

getStaticProps

페이지에서 (정적 사이트 생성) 이라는 함수를 내보내는 경우 getStaticPropsNext.js는 에서 반환된 props를 사용하여 빌드 시 이 페이지를 미리 렌더링합니다 getStaticProps.

getInitialProps

권장: getStaticProps또는getServerSideProps 대신 getInitialProps. 이러한 데이터 가져오기 방법을 사용하면 정적 생성과 서버 측 렌더링 사이에서 세부적으로 선택할 수 있습니다.

getInitialProps페이지에서 서버 측 렌더링 을 활성화 하고 초기 데이터 채우기를 수행할 수 있습니다. 이는 서버에서 이미 채워진 데이터로 페이지 를 보내는 것을 의미 합니다. 이것은 SEO 에 특히 유용합니다 .
getInitialProps자동 정적 최적화 를 비활성화 합니다.

얕은 라우팅 은 현재 페이지의 URL 변경 에만 작동합니다. 예를 들어 라는 다른 페이지가 pages/about.js있고 다음을 실행한다고 가정해 보겠습니다.

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

그것은 새 페이지이므로 얕은 라우팅을 요청했지만 현재 페이지를 언로드하고 새 페이지를 로드한 다음 데이터 가져오기를 기다립니다.