#45RenderingEasy

Static Rendering (generateStaticPages)

Static Rendering (SSG)

빌드 타임에 모든 페이지를 미리 생성하는 SSG의 핵심을 함수로 구현합니다. 라우트 목록과 데이터 번들을 받아, 각 라우트 경로별 HTML 문자열을 담은 Map을 반환하세요.

시그니처

export type Route = {
  path: string;                       // 예: '/about', '/blog/:slug'
  dataKey?: string;                   // data에서 가져올 키 (옵션)
  template: (data: any) => string;    // 데이터를 받아 HTML 문자열 반환
};

export function generateStaticPages(
  routes: Route[],
  data: Record<string, any>
): Map<string, string>;

동작 규칙

  1. 각 route에 대해 template(data[route.dataKey])를 호출. dataKey가 없으면 undefined를 넘긴다.
  2. 결과 HTML을 Map에 path -> html로 저장.
  3. dataKey가 배열이면 각 항목마다 페이지를 생성:
    • path에 :slug 같은 동적 세그먼트가 있으면 항목의 slug 필드로 치환
    • 예: /blog/:slug + [{slug:'a'}, {slug:'b'}] -> /blog/a, /blog/b

사용 예시

const routes: Route[] = [
  { path: '/about', template: () => '<h1>About</h1>' },
  { path: '/blog/:slug', dataKey: 'posts', template: (p) => `<h1>${p.title}</h1>` },
];
const data = { posts: [{ slug: 'a', title: 'A' }, { slug: 'b', title: 'B' }] };
const pages = generateStaticPages(routes, data);
// Map { '/about' => '<h1>About</h1>', '/blog/a' => '<h1>A</h1>', '/blog/b' => '<h1>B</h1>' }

학습 포인트

  • SSG의 본질: 빌드 타임에 path -> HTML 매핑 생성
  • 동적 라우트(getStaticPaths)는 데이터 배열을 path 패턴으로 펼치는 것일 뿐
  • 결과 Map은 그대로 CDN에 업로드 가능한 형태
Sandpack 로드 중…