Static Site Generator (SSG)

클라이언트가 “빌드” 타임에 생성된 HTML을 서버로부터 받아오는 방식입니다.

설명

SSR처럼 서버로부터 완성된 HTML을 받아오지만, 다른 점은 HTML 생성 시점이 빌드 타임이라는 것입니다.
Next.js에서 권장하는 렌더링 방식입니다.
동작 방식은 아래와 같습니다.
1. 사용자가 웹 페이지를 방문하면 엣지 캐싱(edge cashing)된 HTML을 클라이언트로 반환해줍니다.
  - edge cashing: 최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐싱 서버를 사용하는 것.
  - 캐싱 서버를 사용하면 사용자와 물리적으로 가까운 위치에 서버를 배치하여 지연 시간을 최소화할 수 있습니다. 이를 위해 전 세계에 분산된 캐싱 서버 네트워크를 구축하는 CDN(Content Delivery Network) 을 사용하는 경우가 많습니다.
2. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 합니다.

빠른 FP, FCP, TTI: 빌드 타임에 HTML 파일을 생성하기 때문에 빠른 FP, FCP, TTI를 제공합니다.
- FP(First Paint): 사용자가 브라우저에서 처음으로 콘텐츠를 볼 수 있는 시점 (로고, 배경색 등)
- FCP(First Contentful Paint): 브라우저가 처음으로 실제 컨텐츠를 렌더링하는 시점 (이미지, 비디오 등)
- TTI(Time to Interactive): 페이지가 완전히 로드되고 상호작용이 가능한 상태가 되는 시점 (이벤트 처리 등)
빠른 TFB: 매 요청마다 생성하는 것이 아니므로, SSR과 달리 빠른 TFB를 달성할 수 있습니다.
- TFB(Time to First Byte): 웹 페이지 요청 시 서버로부터 첫 번째 바이트를 수신하는 데 걸리는 시간.
- 즉, 매 요청마다 HTML 파일을 생성하는 것이 아니라 사전에 생성되기 때문에 SSR과는 다른 특징을 지닙니다.
- SSR은 매 요청마다 서버 측에서 동적으로 HTML을 생성하는 방식이고, 정적 사이트 생성은 빌드 타임에 HTML 파일을 제공하므로 일관성 있는 빠른 TFB를 제공합니다.
SEO: 이미 생성된 HTML 파일을 받기 때문에 SEO 친화적입니다.

URL에 종속: SSG는 웹 애플리케이션의 모든 URL에 대한 개별 HTML 파일을 생성하는 방식입니다.
- 따라서 URL을 예측할 수 없는 동적인 콘텐츠에 대해서는 SSG를 적용하기 어렵습니다.
- SSR은 매 요청마다 서버에서 페이지를 생성하므로 동적인 컨텐츠에 대해서도 적용이 가능합니다.
- CSR은 페이지를 브라우저에서 동적으로 생성하므로 서버 측에서 HTML 파일을 생성할 필요가 없습니다.