SSG build map

SSG는 요청 전에 데이터를 읽고 HTML을 미리 만들어 두는 전략이다

generateStaticParams는 빌드 시점에 동적 경로 목록을 정하고, 생성된 HTML은 CDN에서 빠르게 응답한다. 데이터 신선도는 ISR 여부로 조정한다.

build time미리 생성할 경로와 데이터를 확정
mock API실습 기준 http://localhost:4000
CDN요청 시 서버 렌더링 없이 정적 결과 전달
01

동적 폴더

posts/[id]처럼 미리 만들 경로의 params 자리를 만든다.

02

목록 조회

generateStaticParams에서 id 목록을 가져온다.

03

페이지 생성

각 id로 page.tsx를 렌더링해 정적 결과를 만든다.

04

배포 캐시

생성 결과를 CDN에 올려 요청 비용을 줄인다.

05

재검증 선택

데이터가 바뀌면 revalidate로 ISR을 적용한다.

전략맞는 데이터운영 신호
SSG문서, 블로그, 공개 상품처럼 모두에게 같은 내용이며 자주 바뀌지 않는 데이터응답은 빠르지만 빌드 전 데이터가 기준
ISR대부분 정적이지만 일정 주기로 최신화해야 하는 데이터revalidate 시간과 stale 허용 범위를 결정
SSR요청마다 권한, 위치, 실시간 값이 달라지는 데이터서버 비용과 TTFB 증가 가능성 확인
CSRSEO보다 사용자 상호작용 후 데이터가 중요한 화면초기 빈 상태와 로딩 UI 품질 확인
params

params 이름을 맞춘다

[id] 폴더라면 generateStaticParams가 id 문자열을 반환해야 한다.

build

빌드 로그로 확인한다

함수는 요청 시점이 아니라 npm run build 중 실행된다.

freshness

신선도 요구를 분리한다

자주 바뀌는 데이터는 순수 SSG보다 ISR이나 서버 렌더링을 검토한다.