shallow routing

shallow routing

 

 

shallow routing 란?

 

• data fetching 메서드(getServerSideProps, getStaticProps, getInitialProps)를 다시 사용하지 않고 URL을 변경하는 방식
• state를 잃지 않으면서 pathname과 router 객체를 통한 query를 업데이트 할 수 있음
• shallow routing을 위해서는 shallow 옵션을 true로 바꿔 주어야 함
• 불필요한 서버 연산을 최소화하고 필요한 상태 값을 라우터에 넣어서 전달하는 것

 

 

data fetching 메서드

 

• Next.js에서는 data fetching 메서드를 제공함
• 사이트를 렌더링하기 전 어떤 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능을 말함

 

┌ getStaticProps

    ┌ getStaticProps는 데이터를 패치하는 함수
    └ Next.js에 getStaticProps가 있다면 페이지 생성시 자동으로 실행되며 그 props를 컴포넌트에 전송함

├ getStaticPaths

    ┌ getStaticPaths는 Next.js에서 동적라우팅이 가능하게끔 만들어 주는 data fetching 메서드

    └ 즉, 페이지 별로 라우팅을 주지 않아도 []을 이용해 동적라우팅이 일어나게 해주는 메서드

└ getServerSideProps

    ┌ getServerSideProps는 getStaticProps와 비슷하지만 서버 사이드 렌더링을 위한 함수

    └ getStaticProps처럼 컴포넌트에 props를 넘겨준다는 공통점이 있으나 빌드 시가 아닌 매 request마다 실행됨