NextJS API - getInitialProps

참고: Next.js 13부터는 (베타) app/ 디렉토리를 도입합니다. 이 새 디렉토리는 컴포넌트 수준의 공간적 데이터 가져오기를 지원하며, 새로운 React use hook과 확장된 fetch Web API를 사용합니다. app/의 점진적 적용에 대해 자세히 알아보세요.

getInitialProps는 페이지에서 서버 측 렌더링을 가능하게 하며 초기 데이터를 채울 수 있도록 해줍니다. 이는 SEO에 특히 유용합니다.

getInitialProps는 자동 정적 최적화를 비활성화합니다.

getInitialProps는 모든 페이지에 정적 메소드로 추가할 수 있는 비동기 함수입니다. 다음 예시를 살펴보세요:

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;

또는 클래스 컴포넌트를 사용할 수도 있습니다:

import React from 'react';

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

  render() {
    return <div>Next stars: {this.props.stars}</div>;
  }
}

export default Page;

getInitialProps는 일부 데이터를 비동기적으로 가져와서 props를 채웁니다.

getInitialProps에서 반환된 데이터는 JSON.stringify와 유사하게 서버 렌더링 시 직렬화됩니다. getInitialProps에서 반환된 객체가 Date, Map 또는 Set을 사용하지 않고 일반 객체인지 확인해주세요.

초기 페이지 로드에 대해서는 getInitialProps가 서버에서만 실행됩니다. 다른 경로로 이동하는 경우 (next/link 구성 요소 또는 next/router를 사용하는 경우) getInitialProps가 클라이언트에서 실행됩니다. 그러나 getInitialProps가 사용된 경우 사용자 정의 _app.js에서 이동하는 페이지가 getServerSideProps를 구현하는 경우 getInitialProps가 서버에서 실행됩니다.

Context 객체

getInitialProps는 context라는 하나의 인자를 받습니다. 이 인자는 다음과 같은 속성을 가진 객체입니다:

• pathname - 현재 라우트입니다. 즉, /pages에서 페이지의 경로입니다.
• query - URL의 쿼리 문자열 부분을 객체로 파싱한 값입니다.
• asPath - 브라우저에 표시되는 실제 경로(쿼리를 포함한) 문자열입니다.
• req - HTTP 요청 객체(서버 전용)
• res - HTTP 응답 객체(서버 전용)
• err - 렌더링 중 오류가 발생하면 오류 객체가 포함됩니다.

이러한 속성을 활용하여 필요한 데이터를 수집하고 처리할 수 있습니다.

주의사항

getInitialProps는 자식 컴포넌트에서는 사용할 수 없으며, 각 페이지의 기본 내보내기에서만 사용할 수 있습니다.
getInitialProps 내에서 서버 측 모듈만 사용하는 경우 적절하게 가져와야 합니다. 그렇지 않으면 앱의 성능이 느려질 수 있습니다.
렌더링 유형과 관계없이 모든 props는 페이지 컴포넌트로 전달되며 초기 HTML에서 클라이언트 측에서 볼 수 있습니다. 이렇게 함으로써 페이지를 올바르게 물들일 수 있습니다. props에 클라이언트에서 사용할 수 없어야 할 중요한 정보가 없도록 주의하세요.

TypeScript

TypeScript를 사용하는 경우, 함수 컴포넌트에 대해 NextPage 타입을 사용할 수 있습니다.

import { NextPage } from 'next';

interface Props {
  userAgent?: string;
}

const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
);

Page.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
  return { userAgent };
};

export default Page;

React.Component의 경우, NextPageContext를 사용할 수 있습니다.

import React from 'react';
import { NextPageContext } from 'next';

interface Props {
  userAgent?: string;
}

export default class Page extends React.Component<Props> {
  static async getInitialProps({ req }: NextPageContext) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
    return { userAgent };
  }

  render() {
    const { userAgent } = this.props;
    return <main>Your user agent: {userAgent}</main>;
  }
}