Next.js의 getInitialProps

라이프 사이클

1. getInitialProps 호출
   • URL주소로 직접 페이지에 접근하면 Node환경에서 getInitialProps가 호출됨
   • 웹브라우저(클라이언트) 에서 SPA로 화면을 이동 할 경우 브라우저 환경에서 getInitialProps가 호출됨
2. getInitialProps의 리턴값이 그대로 constructor의 props로 전달된다.
3. 서버에서 렌더링된 html이 클라이언트로 내려온다
4. 클라이언트에서는 props를 통해 전달받은 데이터를 이용해 추가적인 서버 요청 없이 화면을 리렌더한다.

const Page = ({ stars }) =>
  <div>
    Next stars: {stars}
  </div>

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('//api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

getInitialProps는 아래와 같은 속성을 사용 할 수 있다.

pathname - 현재 URL 경로

query - 객체로 구문 분석된 URL의 문자열 쿼리

asPath - 브라우저에 표시되는 실제 경로의 문자열

req - HTTP 요청 객체 (server 전용)

res - HTTP 응답 객체 (server 전용)

err - 렌더링중 에러가 발생한 경우, 에러 객체

• getInitialProps는 page 폴더 안의 파일들에서만 사용 가능하다. ( 자식 컴포넌트에서는 사용 할 수 없다. )
• getInitialProps가 서버측에서 수행 될 때만 필요한 모듈은 클라이언트에서 불필요하게 로드되지 않게 주의한다. ( window, document와 같이 클라이언트에서만 필요한 모듈은 이곳이 아닌 useEffect에 넣도록 하자 )
• getInitialProps는 Next.js의 Automatic Static Optimazition 기능을 비활성화 시킨다

그래서 자동 정적 최적화( Automatic Static Optimazition ) 가 뭐지?

Next는 데이터 요구사항이 없는 경우 페이지가 정적(미리 렌더링 할 수 있음)인지 자동으로 확인한다.

getInitialProps나 getServerSideProps를 사용할 경우 이 기능을 쓸 수 없다.

위 경우가 아니라면 Next.js는 페이지를 정적 HTML로 사전에 렌더링하여 자동으로 페이지를 최적화한다.
사전 렌더링중에는 query 객체가 존재하지 않기에 Router 기능이 작동하지 않는다.

Next 9.3버전 이후로 사용을 권장하지 않는다