기본적으로 SSG를 사용하는 NextJS에서는 index.html을 보지 못한다. 왜냐하면 빌드 때가 되어서야 HTML 파일이 만들어지기 때문이다.
SSG
미리 빌드 시에 각각의 HTML 문서를 만들 수 있는데, 이 때
컴포넌트에서 사용할 외부 데이터가 없는 경우
pre-rendering을 하기 위해 사용될 외부 데이터가 없다면 그냥 HTML 파일을 build하면 된다.
컴포넌트에서 사용할 외부 데이터가 있는 경우 Pre-rendering 방법
다른 URL에서 API 호출을 하거나 같은 파일 시스템에 존재하는 JSON 데이터를 사용하거나 등등 외부 데이터가 필요한 경우 해당 페이지의 컴포넌트를 export할 때 크게 두 가지 경우로 나눈다.
페이지의 내용이 외부 데이터를 사용하는 경우
만약 getServerSideProps를 써서 빌드한다면 매번 API 데이터를 요청할때마다 새로 페이지가 갱신되어 반환되므로, 만약 API 요청하는 데이터가 바뀌면 바뀐 상태로 보여진다.
하지만 getStaticProps를 한다면, 미리 만들어주기 때문에 데이터가 변경된다고 해도 페이지에 갱신이 되지 않는다.
이 때 사용하는 것이 revalidate 속성이다. 몇 초가 지났을 때부터 페이지의 regeneration이 일어날 수 있을지를 정해주는 속성이다. 정해진 초가 지나고 GET 요청이 오면, 기존 html을 응답하면서 동시에 새로운 html을 regenerate한다. 그리고 다음 GET 요청부터는 갱신된 html 문서를 응답한다. 따라서 너무 즉각적인 반응까지는 필요없다 하면 SSG을 사용하는 것이 좋은 선택이 될 수도 있다.