[NEXT.JS] 정적 사이트 생성(SSG)

소개

Next.js의 정적 사이트 생성(SSG)은 빌드 타임에 HTML 페이지를 미리 생성하여 빠른 로딩 속도와 SEO 최적화를 제공합니다. 이 가이드는 SSG 기능을 자세히 설명합니다.

 

 

SSG의 장점

 

빠른 로딩 속도: 미리 생성된 HTML 페이지는 서버 요청 없이 즉시 로드됩니다.

SEO 최적화: 정적 페이지는 검색 엔진이 쉽게 인덱싱할 수 있습니다.

안정성: 서버 부하를 줄이고, CDN을 통해 전 세계에 빠르게 배포할 수 있습니다.

 

 

 

GetStaticProps 

pages/index.js

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Data from Static Generation</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default HomePage;

 

 

동적 경로 처리

동적 페이지를 정적으로 생성하려면 getStaticPaths와 함께 getStaticProps를 사용합니다.

pages/posts/[id].js

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

 

 

 

getStaticPaths

fallback 옵션을 사용하여 빌드 시 모든 경로를 미리 생성할 필요 없이, 사용자 요청 시 경로를 생성할 수 있습니다.

export async function getStaticPaths() {
  // Only generate a few paths at build time
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
  return { paths, fallback: 'blocking' };
}

 

 

ISR(Incremental Static Regeneration)

ISR을 사용하여 빌드 후에도 정적 페이지를 일정 주기로 업데이트할 수 있습니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // 10초마다 페이지 재생성
  };
}

 

 

문의사항이나 피드백은 댓글로 남겨주세요.