빌드 시점에 HTML 파일을 미리 생성해두는 방식

SSG

SSR의 단점을 해결하는 사전 렌더링 방식
Next.js에서 가장 기본적인 사전 렌더링 방식
빌드 시점에 HTML 파일을 미리 생성해두는 방식 → 사용자가 페이지에 접근할 때마다 이미 생성된 정적인 HTML을 제공하므로, 응답 속도가 매우 빠름.
ex) 블로그 글, 제품 소개 페이지 등

장점

사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에 매우 빠른 속도로 응답 가능.
CDN 캐싱 가능

단점

최신 데이터 반영 불가
→ 빌드 타임 이후에는 다시 페이지를 사전 렌더링하지 않아 매번 똑같은 페이지만 응답.

→ 즉 빌드 타임에 사전 렌더링을 진행하여 한번만 페이지 생성

SSG 추가 설명

Next 앱을 npm run build 명령어로 빌드할 때 (=빌드타임) 미리 사전 렌더링 진행
→ 페이지를 미리 딱 한번만 생성하고 더이상 새롭게 페이지를 생성하지 않음.
1. 빌드가 완료된 후 Next 앱 가동
  2. 브라우저 접속 요청
  3. Next 서버 : 빌드 타임에 미리 만들어 두었던 페이지로 응답

SSG 설정

export const getStaticProps = () => {};

위 처럼 getStaticProps를 설정하면 SSG - Static Site Generation이 됨.

export const getStaticProps = () => {

  console.log('인덱스 페이지')

  return {
    props: {
      data,
    }
  }
};

export default function Home({
  data
}: InferGetStaticPropsType<typeof getStaticProps>) {
  // ...
}

InferGetStaticPropsType : getStaticProps 함수의 반환값 타입을 자동으로 추가

개발 모드 vs 프로덕션 모드

개발 모드

위 처럼 설정해도 서버 측 콘솔에서는 SSR 방식처럼 요청이 들어올 때 마다 사전렌더링이 진행되고 있음.
이유 : Next 앱을 개발 모드로 실행하고 있기 때문.

개발 모드에서는 보다 편리한 개발을 위해 개발자들이 코드 수정 시 수정 결과가 바로 반영되도록 동작.
즉, SSR이던 SSG이던 요청을 받을 때 마다 계속해서 새롭게 페이지를 사전 렌더링 하고 있음.

프로덕션 모드

SSG 방식이 잘 되는지 확인하는 방법 : 프로젝트를 빌드해서 실제 프로덕션 모드로 실행

1	`npm run build`

getStaticProps 함수가 빌드 타임에 실행 되었다고 확인 할 수 있음.

SSG 방식인 index 페이지만 앞에 채워진 흰색 원 기호를 확인 할 수 있음.
기호별 의미는 최하단에 표시

Next.js는 기본적으로 페이지를 사전 렌더링(pre-rendering) 해주는 프레임워크인데, 사전 렌더링에는 두 가지 방식 Next.js는 기본적으로 성능을 중시하기 때문에, 가능한 한 SSG를 기본으로 사용하고, 동적인 데이터가 필요한 경우에만 SSR로 전환하는 걸 권장