1. 개념 요약

정적 경로에 SSG(Static Site Generation)를 적용하는 것은 빌드 시점에 미리 HTML 파일을 생성하여, 요청 시 서버가 아닌 정적 파일을 빠르게 제공하는 방식이다.

2. 배경 지식

SSG는 페이지 내용을 미리 생성해두는 방식으로, 주로 변경이 적고 콘텐츠가 자주 바뀌지 않는 정적 페이지에 적합하다. 정적 경로는 URL이 고정되어 있어 미리 생성하기 쉽다.

3. 상세 설명

Next.js에서 정적 경로에 SSG 적용 예시

// pages/about.tsx
import React from 'react';

export default function About() {
  return <h1>About Page - Static Generation</h1>;
}

// 빌드 시 정적 생성되며, 별도의 데이터 페칭 함수가 없어도 정적 페이지가 만들어진다.

Next.js에서 데이터와 함께 SSG 적용 예시

// pages/posts.tsx
import React from 'react';
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";

export async function getStaticProps(context: GetStaticPropsContext) {
  // 예: 외부 API에서 데이터 미리 가져오기
  const posts = await fetch('<https://jsonplaceholder.typicode.com/posts>')
    .then(res => res.json());

  return {
    props: { posts }, // 페이지 컴포넌트에 props로 전달
  };
}

export default function Posts({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div>
      <h1>Posts List</h1>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}