들어가기

: next.js 는 프리렌더링 (pre-rendering) 기능을 제공해줍니다.

즉, html 을 미리 생성하고 최소한의 js 를 연결 시킨 후 클라이언트에서 요청이 들어오면 해당 html 을 로드하면서 나머지 js 를 불러와 화면에 렌더링 시켜주는 것입니다.

Nextjs 는 아래의 두 가지 프리렌더링 방법을 제공해줍니다.

• Server-side rendering: SSR
• Static site rendering: SSG

getServerSideProps (SSR)

: SSR 의 경우, 요청할 때마다 html 이 생성되기 때문에 데이터가 계속 업데이트 됩니다

→ page 를 사용자가 요청하면 getServerSideProps 를 먼저 실행한 후 프론트가 서버에 직접 요청 후 데이터를 받아와서 page 컴포넌트에 data 를 props 로 전달하여 렌더링할 수 있습니다.

getStaticProps (SSG)

: html 이 빌드타임에 생성됩니다.