next.js에서는 어떤 페이지가 getServerSideProps 또는 getInitialProps를 가지고 있지 않다면, static 페이지로 결정한다. 이렇게 static 페이지로 결정되면, 빌드시 그 페이지는 static 페이지로 빌드된다.
static 페이지는 서버사이드에서 렌더되지 않고 바로 유저에게 전달된다. end-user와 서버 사이에 CDN이 있다면 CDN의 적용 또한 받는다.
query 객체 처리
getServerSideProps 또는 getInitialProps가 없는 페이지는 빌드시 prerender 되어 static 페이지가 생성된다.
prerender 동안은 router의 query는 비어있다. 하지만 hydration이 완료된 이후 next.js는 페이지를 업데이트하며 query객체를 반영한다. 이 과정은 다음과 같은 과정일 때 발생한다.
- 페이지가 dynamic-route일 경우
- URL에 query 값이 있을 경우
- Rewrites가
next.config.js에 설정되어있을 때.
query가 완전히 반영되었음을 확인하기 위해선 next/router의 isReady 필드를 확인하면 된다.
빌드 결과물
next build로 빌드를 마치면 static 페이지는 .next/server/pages/about.html로 결과물이 나온다. 하지만 getServerSideProps 을 사용한 페이지는 .next/server/pages/about.js로 결과물이 나오게 된다.
주의사항
getInitialProps를 사용하는 Custom App이 있다면,getStaticProps등을 활용한 Static Generation를 적용하지 않는한 automatic static 최적화가 동작하지 않는다.getInitialProps를 사용하는 Custom Document가 있다면,ctx.req가 빌드시 정의되어있어야한다. prerender 단계에서ctx.req는 undefined이기 때문이다.next/router의isReady필드가true가 되기 전까지asPath값을 사용하지마라.
출처
- [automatic-static-optimization][https://nextjs.org/docs/advanced-features/automatic-static-optimization]