📚 Reference

📜 Chapter

‣

‣

‣

Pre-rendering

Next.js는 기본적으로 모든 페이지를 Pre-Render(사전 렌더링)한다.
파일 사전 렌더링은 빠른 초기 렌더링과 SEO에 유리하고, 유저가 초기 유입 시 빈 페이지를 보지 않아도 된다는 장점이 있다.
서버에서 HTML 요소를 모두 구성한 후 클라이언트에 전달해주는데, 이때 클라이언트가 전달받은 HTML은 정적인 뷰에 해당하고 Javascript 번들 파일이 로드되기 전이므로 Pre-Render 상태에서 인터렉티브한 동작이 불가한 상태이다.
Next.js에서는 두 가지 Pre-rendering 방식을 제공한다.
- SSG: Static Generation (정적 생성 방식)
  - HTML이 빌드 시 생성되며 각 요청에서 재사용된다.
- SSR: Server-Side Rendering 방식
  - HTML이 각 요청에 대해 생성된다.
Next.js에서는 바로 이 정적 생성 방식을 권장한다.

Static Generation

페이지 정적 생성에는 두 가지 방법이 있다.

1. `getStaticProps`

getStaticProps 함수는 빌드 시 실행되고 외부 데이터를 가져와 페이지 컴포넌트 내부에서 props로 받아올 수 있다.
SSG는 빌드 시에 한 번 발생 하기 때문에 자주 업데이트되거나 모든 사용자 요청에 따라 변경되는 데이터에는 적합하지 않다.
데이터가 변경될 가능성이 있는 경우 서버사이드 렌더링을 사용할 수 있다.
페이지 콘텐츠가 외부 데이터에 연동된다.
기본적으로 page에서 외부 데이터를 가져올 때 사용된다.