Next.js

[Next.js] 자동 정적 최적화

spacew 2024. 8. 22. 18:41

자동 정적 최적화 (Automatic Static Optimization)

Next.js 는 페이지에 데이터 차단 요구사항이 없을 경우 해당 페이지가 정적으로 사전 렌더링될 수 있는지 자동으로 판단합니다. 이 판단은 페이지에 getServerSideProps 나 getInitialProps 가 없을 때 이루어집니다.

getServerSideProps
Next.js 에서 서버 사이드 렌더링을 위해 사용되는 함수입니다.
페이지 요청 시마다 서버에서 실행되어 데이터를 가져오고, 그 데이터를 사용하여 페이지를 렌더링합니다. 이를 통해서 최신 데이터를 항상 제공할 수 있습니다.

getInitialProps
페이지나 커스텀 App 컴포넌트가 초기화될 때 데이터를 가져오기 위해 사용되는 함수입니다. 이 함수는 서버 측에서 호출될 수도 있고, 클라이언트 측에서 호출될 수도 있습니다. getServerSideProps 와 달리 getInitialProps 는 페이지와 App 컴포넌트 모두에서 사용할 수 있습니다.

이 기능을 통해 Next.js 는 서버 렌더링된 페이지와 정적으로 생성된 페이지를 모두 포함하는 하이브리드 애플리케이션을 생성할 수 있습니다.

정적으로 생성된 페이지는 여전히 반응형입니다. Next.js 는 애플리케이션을 클라이언트 측에서 수화hydrate 하여 완전한 상호작용을 제공합니다.

수화 (hydration)
수화는 서버에서 렌더링된 HTML 을 가져와 브라우저에서 자바스크립트와 결합하여 React 애플리케이션으로 변환하는 과정입니다.
변환 과정:

  1. 서버 렌더링된 HTML 로드: 클라이언트는 서버에서 미리 렌더링된 HTML 페이지를 로드합니다.
  2. 클라이언트 측 자바스크립트 로드: 브라우저는 React 애플리케이션의 자바스크립트 번들을 로드합니다.
  3. 수화 과정: React 는 서버 렌더링된 HTML 을 사용하여 초기 상태를 설정하고, React 컴포넌트 트리를 재구성합니다. 이 과정에서 React 는 DOM 노드와 이벤트 핸들러를 연결합니다.

이 기능의 주요 이점 중 하나는 최적화된 페이지가 서버 측 계산을 필요로 하지 않으며, 여러 CDN 위치에서 즉시 사용자에게 스트리밍될 수 있다는 것입니다. 결과적으로 사용자는 매우 빠른 로딩 경험을 할 수 있습니다.

작동 방식

페이지에 getServerSideProps 나 getIinitialProps 가 있으면 Next.js 는 페이지를 요청할 때 마다 서버에서 렌더링(SSR)합니다.

위 경우가 아니면, Next.js 는 페이지를 정적 HTML 로 미리 렌더링하여 자동으로 정적 최적화를 수행합니다.

사전 렌더링 중에는 라우터의 query 객체가 비어있습니다. 이 단계에서는 쿼리 정보를 제공할 수 없기 때문입니다. 수화가 완료된 후, Next.js 는 애플리케이션을 업데이트하여 query 객체에 경로 매개변수를 제공합니다.

수화 후 쿼리가 업데이트되어 다시 렌더링을 트리거하는 경우는 다음과 같습니다.

  • 페이지가 동적 경로인 경우
  • 페이지에 URL 쿼리 값이 있는 경우
  • next.config.js 에서 rewrite 가 구성된 경우

next build 는 정적으로 최적화된 페이지에 대해 .html 파일을 생성합니다.
예를 들어 pages/about.js 페이지의 결과는 다음과 같습니다.

.next/server/pages/about.html

그리고 페이지에 getServerSideProps 를 추가하면 다음과 같이 자바스크립트 파일이 생성됩니다.

.next/server/pages/about.js

주의사항

  • getInitialProps 가 있는 커스텀 App 을 사용하는 경우, 정적 생성이 없는 페이지에 대한 비활성화됩니다.
  • getInitialProps 가 있는 커스텀 Document 를 사용하는 경우, ctx.req 가 정의되어 있는지 확인하여 페이지가 서버측에서 렌더링되는지 확인해야 합니다. ctx.req 는 사전 렌더링된 페이지에서는 정의되지 않습니다.

요약

  • 자동 정적 최적화: 페이지에 getServerSideProps 나 getInitialProps 가 없을 경우, Next.js 는 페이지를 정적으로 미리 렌더링합니다.
  • 하이브리드 애플리케이션: Next.js 는 서버 렌더링된 페이지와 정적으로 생성된 페이지를 모두 포함할 수 있습니다.
  • 빠른 로딩 속도: 최적화된 페이지는 서버 측 계산이 필요 없고, 여러 CDN 에서 즉시 스트리밍될 수 있습니다.
  • 주의사항: getInitialProps 가 있는 커스텀 App 과 Document 를 사용할 때는 정적 최적화가 비활성화될 수 있고, asPath 값을 사용할 때는 isReady 필드를 확인해야 합니다.