Shallow Routing이란?
Shallow routing은 getServerSideProps, getStaticProps, getInitialProps 같은 데이터를 가져오는 메서드를 다시 동작시키지 않고 URL 변경을 가능하게 한다.
업데이트된 pathname, query의 상태를 읽지않고, router 객체를 통해서 받는다.
유의점: 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마다 실행된다는 차이점이 있음
Devtrip