제목: Next.js의 getInitialProps 이해하기 – 포괄적인 가이드
Apollo/GraphQL을 사용하여 Next.js 앱을 구축 중이라면 getInitialProps 라이프사이클 훅을 만나볼 수 있습니다. 이 블로그 포스트에서는 getInitialProps가 어떻게 동작하는지, 그 이점은 무엇인지, 어떻게 효과적으로 Next.js 프로젝트에서 사용하는지에 대해 자세히 알아보겠습니다.
getInitialProps란?
getInitialProps는 Next.js가 제공하는 라이프사이클 훅으로, 컴포넌트가 마운트되기 전에 서버 사이드 랜더링 (SSR)을 위해 초기 프롭스를 가져오고 설정할 수 있게 해줍니다. 데이터베이스로부터 데이터를 사전에 불러오고 페이지 로드 시간을 개선하여 SEO를 향상시키는 데 일반적으로 사용됩니다.
Apollo 및 GraphQL과 함께 getInitialProps 사용하기
Next.js에서 Apollo Client를 사용하는 경우 앱 전체의 쿼리를 통해 가져온 데이터를 서버 사이드 랜더링하기 위해 각 페이지 컴포넌트에 getInitialProps를 사용해야 할지 궁금할 수 있습니다. 답은 NO입니다. Next.js에서는 컴포넌트마다 getInitialProps를 수동으로 설정하지 않아도 모든 컴포넌트가 해당 쿼리로 렌더링되도록 getInitialProps 메소드에 대한 구성을 제공합니다.
다음은 getInitialProps의 예제 구성으로, Query 컴포넌트를 사용하는 모든 컴포넌트가 해당 쿼리로 렌더링되도록 하는 설정입니다:
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
// 사용자에게 쿼리 노출하기
pageProps.query = ctx.query;
return { pageProps };
}
getInitialProps의 제한사항
getInitialProps는 서버 사이드 랜더링에 유용한 도구이지만, 몇 가지 제한사항이 있습니다. 이 메소드는 페이지의 인덱스 컴포넌트에서만 동작합니다 (_app.js도 포함). 컴포넌트 트리에 위치한 하위 컴포넌트는 이 라이프사이클 메소드에 직접 액세스할 수 없습니다. 이 제한을 극복하기 위해 페이지 레벨에서 초기 프롭스를 컴포넌트 트리를 통해 전달할 수 있습니다.
서버 사이드 랜더링 문제 해결하기
Heroku나 Now와 같은 플랫폼에서 공용 URL로 서버 사이드 랜더링이 제대로 이루어지지 않는 경우, 사용자 정의 URL을 구입하고 적용하는 것이 가능한 해결책입니다. 또한, Apollo Client를 올바르게 구성하여 적절한 SSR이 이루어지도록 해야 합니다. 다음은 Apollo Client fetch 요청에 대한 헤더와 인증 정보를 설정하는 구성 예시입니다:
const request = (operation) => {
operation.setContext({
fetchOptions: {
credentials: 'include'
},
headers: { cookie: headers.cookie }
});
};
이러한 단계를 따라 서버 사이드 랜더링을 수동으로 각 페이지에 설정할 필요 없이 달성할 수 있습니다. 이는 시간과 노력을 절약하여 보다 간소화된 개발 프로세스를 가능하게 합니다.
결론
요약하자면, getInitialProps는 Next.js에서 초기 서버 사이드 랜더링 프롭스를 가져오고 설정하는 유용한 라이프사이클 훅입니다. 이 기능을 Apollo 및 GraphQL과 함께 활용하여 Next.js 애플리케이션의 성능과 SEO를 향상시킬 수 있습니다. 서버 사이드 랜더링에 관련된 잠재적인 문제를 극복하기 위한 필요한 구성 방법과 제한사항을 기억해주세요. 이제 getInitialProps에 대한 명확한 이해를 가지고, Next.js 프로젝트를 최적화하여 더 나은 사용자 경험을 제공할 준비가 되었습니다.
