Next.js / SSG(Static Site Generation) 미니 정리

제미나이로 생성한 Next.js 이미지

 

 

SSG(Static Site Generation)

 

1. Next.js가 getStaticProps()를 실행해서 데이터를 가져온다.

 

2. 그 데이터를 이용해 빌드 시점에 HTML 파일을 미리 만들어 둔다.

 

3. 사용자가 /page 같은 URL로 접속하면 Next.js가 이미 만들어둔 정적 HTML을 그대로 제공한다.

 

4. 브라우저는 React를 Hydration 해서 동적 기능이 작동하게 한다.

// pages/book/[id].tsx
export const getStaticPaths = async () => {
  const res = await fetch("https://example.com/api/books");
  const books = await res.json();
 
  const paths = books.map((b) => ({
    params: { id: b.id.toString() },
  }));
 
  return { paths, fallback: true };
};
 
export const getStaticProps = async (context) => {
  const id = context.params!.id;
  const res = await fetch(`https://example.com/api/book/${id}`);
  const book = await res.json();
 
  if (!book) return { notFound: true };
 
  return {
    props: { book },
  };
};