getInitialProps란? | getInitialProps 사용이 권장되지 않는 이유

getInitialProps에 대한 NextJS 공식문서의 설명

NextJS에 대해서 알아보던 중 더이상 getInitialProps 함수는 공식적으로 더이상 사용이 권장되지 않는다는 것을 알았다. 정확히 getInitialProps 함수가 무엇인지, 언제 사용되고 getServerSideProps와의 차이점이 무엇인지, 왜 사용이 권장되지 않는건지 알아보려고 한다.

 

getInitialProps란

NextJs의 페이지 컴포넌트에서 서버 측 데이터를 미리 불러와 페이지를 렌더링하기 전에 초기화하는 함수. 페이지가 처음 로드 되는 상황인 경우, 서버 사이드에서 실행되며 next/link 또는 next/router 를 통해 라우팅 될 경우, 클라이언트 사이드에서 실행된다.

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

 

getInitialProps 사용이 더이상 권장되지 않는 이유

1. 서버사이드와 클라이언트사이드 모두에서 실행되기 때문에 발생하는 이슈:

• SSR과 CSR의 코드 분할이 어려워져 불필요한 코드가 클라이언트로 전송되어 초기 로딩 성능에 부정적인 영향을 미칠 수 있다.
• SSR은 가능하지만 클라이언트에서도 실행 되어야 하는 상황이 존재 하기 때문에 번들 사이즈가 커진다.

2. Automatic Static Optimization(ASO)를 지원하지 않아 발생하는 이슈:

• Automatic Static Optimization이라는 정적 페이지를 자동으로 최적화하는 NextJS에서 제공하는 기능을 사용하지 못하여 성능이 저하됨.

 

getInitialProps를 대체할 방향

1. 정적인 페이지에서의 서버사이드 데이터 처리는 getStaticProps를 사용
2. 정적인 서버에서의 데이터 처리는 getServerSideProps를 사용하고, 동적인 데이터의 처리는 클라이언트 사이드에서 처리