Next.js getInitialProps 제대로 알고 사용하기

Next.js 9.3 이전 버전에서는 SSR (Server-Side Rendering)을 위해 getInitialProps만을 사용했습니다.

 

하지만 9.3 버전 이후부터는 SSR을 위해 getStaticProps나 getServersideProps를 사용하는 것이 권장됩니다.

 

(이에 대한 사용법은 아래 링크를 통해 자세히 확인할 수 있습니다)

Next.js - getStaticProps vs. getServerSideProps, 차이와 활용

 

 

사용 예제

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

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

export default Page

1. getInitialProps는 각 페이지에 static method로 구현됩니다.

 

2. "async" function으로 구현할 수 있습니다.

 

3. 현재 Page 내 "stars"는 client로 보내지기전에 server에서 "stars"값을 받은 후에 보내지며, 이것을 SSR이라고 합니다. 따라서, 검색엔진은 "stars"값까지 채워진 상태로 페이지를 긁어가기 때문에 SEO 최적화에 도움이 됩니다.

 

4. Context 객체는 아래의 properties를 갖고 있습니다.

• pathname (String) - 현재 route 이름
• query (Object) - URL의 Query string section
• asPath (String) - query를 포함한 실제 경로명 (브라우저에 보이는 주소값)
• req (Object) - HTTP request object (server-side only)
• res (Object) - HTTP response object (server-side only)
• err (Object) - 렌더링 중 오류 발생 시 Error object

 

 

주의 사항

1. getInitalProps는 자식 component에는 사용할 수 없습니다. (오직 page에만 적용가능)

 

2. 만약 커스텀하게 구현한 App 컴포넌트에 getInitialProps를 적용 시 Automatic static optimization 기능이 작동하지 않게 됩니다. 이는 SEO 최적화를 악화시킬 수 있습니다.

 

3. 만약 커스텀하게 구현한 Document에 getInitialProps를 적용 시 ctx.req가 server-side rendered 되기 전에 확실히 정의가 됐는지 확인해야 합니다. Prerender된 page의 경우 ctx.req는 undefined가 됩니다.