Automatic Static Optimization
Next.js는 bloking data 요청사항이 없다면 페이지가 정적인지 자동으로 결정한다.
이 결정은 페이지 내에서 getServerSideProps,getInitialProps가 없으면 이루어진다.
이 기능을 통해 Next.js는 서버에서 렌더링 된 페이지와 정적으로 생성된 페이지를 포함하는 하이브리드 애플리케이션을 내보낼 수 있게된다.
정적으로 생성된 페이지는 여전히 reactive하다.
Next.js는 어플리케이션의 클라이언트 측을 full interactivity하게 hydrate 할 것이다.
Automatic Static Optimization의 주된 이점 중 하나는 페이지가 서버측에서의 계산을 필요치 않으며 다양한 CDN Location에서 최종 사용자에게 즉시 보낼 수 있다는 것이다.
Next.js의 핵심 개념: hydrate
Server Side 단에서 렌더링 된 정적 페이지와 번들링 된 JS 파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 JS코드를 서로 매칭시키는 과정이다.
REACT는 JS만을 사용해 화면을 painting한다. Next.js는 ServerSide에서 미리 웹페이지를 Pre-rendering하여 generate된 HTML document를 클라이언트에게 전송한다.
클라이언트가 받은 웹페이지는 자바스크립트가 없기에 interactive하지 않다.
개발자 도구의 네트워크 탭을 보면, document Type의 파일을 다운로드 받은 뒤 자바스크립트 파일들이 다운로드되는 것을 확인할 수 있다.
그리고 이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서 각자 자기 자리를 찾아가며 매칭이 된다.
이것을 Hydrate라고 한다.출처 : https://helloinyong.tistory.com/315
How it works ?
getServerSideProps 또는 getInitialProps가 페이지에 있으면, Next.js는 요청에 따라 페이지를 렌더링하도록 전환한다.
위 경우가 아니라면 Next.js는 페이지를 HTML로 미리 렌더링하여 자동으로 페이지를 정적으로 최적화한다.
pre-rendering이 진행되는 동안, router의 query 객체는 제공할 쿼리 정보가 없기떄문에 비어있다.
hydration 이후에, Next.js는 쿼리 객체에 path parameter를 제공하기 위해 어플리케이션에 대한 업데이트를 트리거한다.
또다른 rendering이 triggering되는 hydration 후에 쿼리가 업데이트 되는 경우는 다음과 같다.
- 페이지가 동적 경로일 때
- 페이지의 URL에 쿼리 값이 있을 때
- 쿼리가 제공해야 동작할 수 있는 매개변수가 있는 동안
next.config.js내에서 구성된 요소들이 수정되었을 때
쿼리가 완전히 업데이트 되었거나 사용할 수 있을 때를 구별하기 위해
next/router의 isReady를 사용할 수 있다.
getStaticProps를 사용하는 페이지에 대한 동적 경로와 함께 추가된 매개변수는 쿼리 개체 내에서 항상 사용할 수 있다.
next build는 정적으로 최적화된 페이지인 HTML 파일로 내보낼 것이다.
예를들면 pages/about.js would be:
.next/server/pages/about.htmlAnd if you add getServerSideProps to the page, it will then be JavaScript, like so:
.next/server/pages/about.jsCAVEAT
-
getInitialProps가 있는 custom App이 있다면 Static Genertation이 없는 페이지에서 optimization은 해제된다.
-
getInitialProps가 있는 custom Document가 있는 경우 페이지가 서버에서 렌더링된다고 가정하기 전에 ctx.req가 정의되어 있는지 확인해야한다. ctx.req는 pre-render된 페이지에 대해 undefined이다.
