[Next.js] Shallow Routing 에대해 ARABOZA.

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마다 실행된다는 차이점이 있음