📌 Next.js에서 getStaticProps와 getStaticPaths를 활용한 SSG 정리

📌 Next.js에서 getStaticProps와 getStaticPaths를 활용한 SSG 정리

✅ Next.js의 데이터 패칭 전략

Next.js에서는 페이지를 생성할 때 다양한 데이터 패칭 방식이 있습니다.
대표적으로 SSG(Static Site Generation), SSR(Server Side Rendering), ISR(Incremental Static Regeneration), **CSR(Client Side Rendering)**이 있습니다.

오늘 정리할 방식은 SSG(정적 사이트 생성) 방식으로, getStaticProps와 getStaticPaths를 활용하여 미리 HTML을 생성하는 방식입니다.

---

🔹 SSG(Static Site Generation)란?

**SSG(정적 사이트 생성)**은 빌드 시점에 HTML을 미리 생성하여 제공하는 방식입니다.
즉, 요청이 들어오기 전에 미리 페이지를 생성하고, 정적인 HTML 파일을 배포하는 방식입니다.

🔹 장점

• 빌드 시점에 페이지가 생성되므로 빠른 로딩 속도 제공
• 서버 부하를 줄일 수 있음
• CDN(콘텐츠 배포 네트워크) 캐싱을 활용할 수 있음
• 검색 엔진 최적화(SEO)에 유리함

🔹 단점

• 실시간 데이터 반영이 어려움 (빌드 시점에만 데이터가 업데이트됨)
• 너무 많은 페이지를 생성할 경우 빌드 시간이 길어질 수 있음

---

📌 getStaticProps 사용법

getStaticProps는 SSG 방식으로 데이터를 가져올 때 사용되는 함수입니다.
이 함수는 빌드 시점에서 실행되며, 서버에서 데이터를 가져와 페이지에 전달합니다.

📌 getStaticProps의 특징

• 빌드 시점에 한 번 실행됨
• 서버에서만 실행되므로 브라우저에서는 실행되지 않음
• 클라이언트 측에서 실행되지 않으므로 보안이 필요한 데이터를 숨길 수 있음
• 반환된 props는 페이지 컴포넌트에 전달됨

📝 사용 예제 (getStaticProps)

import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import fetchOneBook from "@/lib/fetch-one-book";

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params!.id; // URL의 id 파라미터 가져오기
  const book = await fetchOneBook(Number(id)); // API 요청

  if (!book) {
    return { notFound: true }; // 데이터가 없으면 404 페이지 반환
  }

  return {
    props: { book }, // 데이터를 props로 전달
  };
};

export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  if (!book) return "문제가 발생했습니다 다시 시도하세요";

  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
    </div>
  );
}

---

📌 getStaticPaths 사용법

getStaticPaths는 **동적 경로(dynamic routes)**에서 getStaticProps와 함께 사용됩니다.
즉, /books/[id] 같은 동적 페이지를 정적으로 생성할 때 사용됩니다.

📌 getStaticPaths의 특징

• 어떤 경로를 사전 렌더링할지 결정하는 역할
• fallback 옵션을 사용하여 페이지가 없을 경우 처리 방식 선택 가능
• paths를 통해 사전에 빌드할 페이지들을 정해줌

📝 사용 예제 (getStaticPaths)

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: false, // 404 페이지 반환
  };
};

🔹 fallback 옵션

fallback 값 동작 방식

false	paths에 정의되지 않은 페이지는 404 페이지로 처리됨
true	paths에 없는 경로도 요청하면 즉시 빈 페이지를 반환한 후, 서버에서 생성 후 클라이언트에 전달
"blocking"	paths에 없는 경로 요청 시 서버에서 페이지를 생성한 후 클라이언트에 제공

---

📌 SSG 적용 예제

아래는 책 상세 페이지를 SSG 방식으로 구현한 코드입니다.

import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import style from "./[id].module.css";
import fetchOneBook from "@/lib/fetch-one-book";

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: false, // 정의되지 않은 경로는 404 페이지 반환
  };
};

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params!.id;
  const book = await fetchOneBook(Number(id));

  if (!book) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      book,
    },
  };
};

export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  if (!book) return "문제가 발생했습니다 다시 시도하세요";

  return (
    <div className={style.container}>
      <div className={style.cover_img_container} style={{ backgroundImage: `url('${book.coverImgUrl}')` }}>
        <img src={book.coverImgUrl} />
      </div>
      <div className={style.title}>{book.title}</div>
      <div className={style.subTitle}>{book.subTitle}</div>
      <div className={style.author}>{book.author} | {book.publisher}</div>
      <div className={style.description}>{book.description}</div>
    </div>
  );
}

---

📌 결론

getStaticProps와 getStaticPaths를 활용하면 Next.js에서 정적 사이트를 생성(SSG)하여 성능을 극대화할 수 있습니다.

• getStaticProps: 빌드 시점에 데이터를 가져와 정적 페이지 생성
• getStaticPaths: 동적 라우팅을 위한 정적 페이지 목록을 사전 정의
• fallback: 정의되지 않은 경로에 대한 처리 방식 선택

💡 언제 사용하면 좋을까? ✅ 데이터가 자주 변경되지 않는 페이지 (예: 블로그 글, 제품 상세 페이지)
✅ SEO가 중요한 페이지 (검색 엔진 노출 최적화)
✅ 빠른 로딩이 필요한 페이지

이제 Next.js에서 getStaticProps와 getStaticPaths를 제대로 활용하여 최적화된 웹사이트를 만들 수 있습니다! 🚀🔥

---