Next.js는 페이지가 데이터 요구사항이 없으면 (서버에서 데이터를 가져올 필요가 없으면) 정적(사전 렌더링 가능한) 페이지인 것으로 자동으로 간주합니다.
이 결정은 페이지에서 getServerSideProps와 getInitialProps가 없는 경우에 이루어집니다.
이 기능을 통해 Next.js는 서버에서 렌더링된 페이지와 정적으로 생성된 페이지를 모두 포함하는 하이브리드 애플리케이션을 만들 수 있습니다.
정적으로 생성된 페이지도 반응형입니다.
Next.js는 클라이언트 측에서 애플리케이션을 하이드레이트하여 완전한 상호작용성을 제공합니다.
이 기능의 주요 이점 중 하나는 최적화된 페이지가 서버 측 계산이 필요하지 않으며, 여러 CDN 위치에서 즉시 스트리밍될 수 있기 때문에 사용자에게 매우 빠른 로딩 경험을 제공한다는 것입니다.
작동 방식
getServerSideProps 또는 getInitialProps가 페이지에 있는 경우, Next.js는 페이지를 요청별로 필요할 때 렌더링하기 위해 전환합니다(즉, 서버 사이드 렌더링).
만약 위와 같은 경우가 아니라면, Next.js는 페이지를 정적 HTML로 사전 렌더링하여 자동으로 정적으로 최적화(statically optimize)합니다.
사전 렌더링 중에는 라우터의 쿼리 객체가 비어 있으며, 이 단계에서는 쿼리 정보를 제공할 수 없습니다. 하이드레이션 후에 Next.js는 쿼리 객체에 라우트 매개변수를 제공하기 위해 애플리케이션을 업데이트합니다.
쿼리가 하이드레이션 후 업데이트되어 다시 렌더링이 트리거되는 경우는 다음과 같습니다:
- 페이지가 동적 경로일 때
- 페이지 URL에 쿼리 값이 있을 때
next.config.js에서 rewrites가 구성된 경우, 이는 쿼리를 구문 분석하고 제공해야 할 매개 변수가 있을 수 있기 때문입니다.
쿼리가 하이드레이션 후 완전히 업데이트되어 사용할 수 있는지 여부를 구분하려면 next/router의 isReady 필드를 활용할 수 있습니다.
참고:
getStaticProps를 사용하는 페이지에 동적 라우트로 추가된 매개변수는 항상 쿼리 객체 내에서 사용할 수 있습니다.
next build는 정적으로 최적화된 페이지를 위해 .html 파일을 내보냅니다. 예를 들어, 페이지 pages/about.js의 결과는 다음과 같습니다.
.next/server/pages/about.html그리고 페이지에 getServerSideProps를 추가하면 다음과 같이 JavaScript가 됩니다.
.next/server/pages/about.js주의 사항
getInitialProps가 있는 사용자 정의App이 있다면,Static Generation이 없는 페이지에서 이 최적화가 꺼지게 됩니다.getInitialProps를 가진 커스텀Document가 있다면, 페이지가 서버 측에서 렌더링되는 것으로 가정하기 전에ctx.req이 정의되어 있는지 확인하십시오.prerendered된 페이지의 경우ctx.req은 정의되어 있지 않을 수 있습니다.- 렌더링 트리에서
next/router의asPath값을 사용할 때,router의isReady필드가true일 때까지 사용하지 않는 것이 좋습니다. 정적으로 최적화된 페이지는 클라이언트에만asPath를 알고 있으므로, 이 값을prop으로 사용하면 일치하지 않는 오류가 발생할 수 있습니다.active-class-name예제는asPath를prop으로 사용하는 한 가지 방법을 보여줍니다.
