Next는 페이지에 getInitialProps가 없으면 해당 페이지는 static페이지라고 판단하여 pre-render한다. 페이지를 pre-render한다는 말은 빌드할떄 그 페이지를 html파일로 만들어버린다는 얘기이다. 유저의 요청이 들어왔을때 서버에서 html파일을 만들어서 주는게 아니라 미리 빌드할때 페이지를 만들어둔다. 그 페이지에서 비동기 요청을 해서 받아온 데이터로 마크업이 달라지지 않기 때문에 미리 빌드타임에 pre-render하는것이다.
pages/Homepage.js
import fetch from 'isomorphic-unfetch'function HomePage({ stars }) {
return <div>Next stars: {stars}</div>
}HomePage.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const json = await res.json()
return { stars: json.stargazers_count }
}export default HomePage
위 HomePage 페이지에는 getInitialProps가 존재하기 때문에 next는 이 페이지를 pre-render하지 않는다. getInitialProps에서 비동기 요청으로 받아온 데이터로 마크업에 렌더링 할 수도 있기 떄문에 static 페이지로 만들수가없다. getInitialProps가 있는 페이지는 서버사이드 렌더링 방식으로 동작하게 된다.
넥스트는 서버사이드렌더링과 static 페이지를 적절히 섞어서 사용해서 최적화 해준다. 동적인 데이터 바인딩이 필요없는 페이지는 static page로 미리 만들어둬서 유저가 페이지를 빠르게 볼 수 있도록 하고, 동적인 데이터 바인딩이 필요한 페이지는 서버사이드 렌더링으로 유저가 항상 그 페이지에서 최신 데이터를 볼 수 있게 해준다.
static page도 일반 페이지들과 마찬가지로 유저와 상호작용 할 수 있다. 유저가 해당 페이지에서 어떤 컴포넌트를 클릭해도 클릭 이벤트를 처리 할 수 있다. 넥스트가 알아서 hydrate 과정을 진행 해 주기 때문이다.
페이지에 getInitialProps가 없을때
넥스트는 해당 페이지를 pre-render하여 미리 html을 준비해둔다. pre-render하는 동안에는(빌드타임) 라우터의 쿼리 객체는 비어있지만 hydration과정(리액트 컴포넌트가 이벤트를 수신할수있음) 후에 쿼리 객체를 사용할 수 있다.
next build 커맨드
이 커맨드를 입력하면 getInitialProps가 있는 페이지는 static html 페이지로 만들어진다. 없는 페이지는 자바스크립트 파일로 만들어진다.
about 컴포넌트에 getInitialProps 없는 경우
.next/server/static/${BUILD_ID}/about.html있는 경우
.next/server/static/${BUILD_ID}/about.js결론
넥스트에서 Automatic Static Optimization이란 pages 폴더 아래 모든 페이지에 대해서 getInitialProps가 있는지 없는지 판단해서 해당 페이지를 pre-render할지 server side rendering할지를 결정하는 과정을 의미한다.
