🚀 Next.js의 Static Generation: 정적 생성의 모든 것 🖼️

🚀 Next.js의 Static Generation: 정적 생성의 모든 것 🖼️

 

Next.js는 React 생태계에서 SSR(Server Side Rendering)과 SSG(Static Site Generation)를 매끄럽게 통합하여 강력한 웹 애플리케이션을 구축할 수 있는 프레임워크의 정점이에요. 오늘은 **정적 생성(Static Generation)**에 대해 깊이 파고들어 보겠습니다. 왜 사용해야 하는지, 어떻게 구현하는지, 그리고 실무에서 어떤 이점을 얻을 수 있는지까지요. 🛠️

 

✨ Static Generation이란?

 

정적 생성(Static Generation)은 빌드 타임에 HTML 파일을 생성하는 방법입니다. 이러한 HTML은 요청 시 서버에서 생성되지 않고, 미리 빌드된 상태로 사용자에게 전달됩니다.

• 장점:

• 빠른 속도: 정적 파일은 CDN(Content Delivery Network)에 캐싱되어 요청 시 즉시 제공됩니다.

• 보안: 서버 로직이 실행되지 않으므로 공격 표면이 적습니다.

• SEO 최적화: 검색 엔진은 정적 HTML 파일을 바로 크롤링할 수 있습니다.

 

💡 Static Generation이 적합한 경우

 

📝 정적 콘텐츠

 

블로그, 문서, 마케팅 페이지 등 변경 빈도가 낮은 콘텐츠에 적합합니다.

 

📦 API 기반 콘텐츠

 

API에서 가져온 데이터가 빈번히 업데이트되지 않는다면, 이를 정적으로 빌드하여 효율성을 극대화할 수 있어요.

 

🔧 Static Generation 구현 방법

 

Next.js에서는 getStaticProps와 getStaticPaths 두 가지 함수를 사용하여 정적 생성을 구현합니다.

 

1️⃣ getStaticProps: 정적 데이터를 빌드 타임에 가져오기

 

기본 사용법

 

export async function getStaticProps() {

  const res = await fetch('https://api.example.com/posts');

  const posts = await res.json();

 

  return {

    props: {

      posts

    }

  };

}

 

• **getStaticProps**는 빌드 타임에 실행되어 데이터를 가져옵니다.

• 반환된 props는 페이지 컴포넌트에 전달됩니다.

 

예제: 블로그 포스트 리스트

 

const Blog = ({ posts }) => (

  <div>

    <h1>Blog</h1>

    <ul>

      {posts.map(post => (

        <li key={post.id}>{post.title}</li>

      ))}

    </ul>

  </div>

);

 

export default Blog;

 

export async function getStaticProps() {

  const res = await fetch('https://api.example.com/posts');

  const posts = await res.json();

 

  return {

    props: {

      posts

    }

  };

}

 

2️⃣ getStaticPaths: 동적 라우팅과 정적 생성

 

동작 원리

 

getStaticPaths는 동적 경로([id])를 정적으로 빌드하기 위해 사용됩니다.

 

기본 사용법

 

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

  };

}

 

• paths: 정적으로 생성할 경로를 지정합니다.

• fallback:

• false: 지정된 경로 외에는 404를 반환합니다.

• true: 요청 시 경로를 생성합니다.

• 'blocking': 요청이 끝날 때까지 사용자에게 아무것도 표시하지 않습니다.

 

예제: 블로그 상세 페이지

 

const Post = ({ post }) => (

  <div>

    <h1>{post.title}</h1>

    <p>{post.body}</p>

  </div>

);

 

export default Post;

 

export async function getStaticProps({ params }) {

  const res = await fetch(`https://api.example.com/posts/${params.id}`);

  const post = await res.json();

 

  return {

    props: {

      post

    }

  };

}

 

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

  };

}

 

📊 ISR(Incremental Static Regeneration)와의 차이점

 

Next.js는 SSG에 ISR을 추가하여, 기존 빌드 타임에만 생성되던 정적 파일을 동적으로 업데이트할 수 있습니다.

 

ISR 사용 예제

 

export async function getStaticProps() {

  const res = await fetch('https://api.example.com/posts');

  const posts = await res.json();

 

  return {

    props: {

      posts

    },

    revalidate: 10 // 10초마다 재생성

  };

}

 

• revalidate: 페이지가 **지정된 시간(초)**마다 다시 생성됩니다.

 

🔑 Static Generation의 주요 이점

1. SEO 최적화

정적 HTML 파일은 검색 엔진이 쉽게 크롤링할 수 있습니다.

2. 빠른 로드 속도

CDN에서 캐싱된 정적 파일을 직접 제공하므로 지연 시간이 거의 없습니다.

3. 비용 효율성

서버 요청이 줄어들어 비용을 절감할 수 있습니다.

4. 보안 강화

서버사이드 로직이 없으므로 공격 표면이 줄어듭니다.

 

🤔 Static Generation을 언제 사용해야 할까?

 

적합한 경우:

• 블로그, 문서 사이트

• 변경이 적은 마케팅 페이지

• SEO가 중요한 콘텐츠

 

부적합한 경우:

• 사용자 맞춤형 데이터(로그인 상태, 권한 등)

• 자주 변경되는 콘텐츠(예: 주식 가격)

 

📌 실무에서의 팁

1. API 호출 주의:

SSG는 빌드 타임에 실행되므로, 데이터 소스가 안정적이고 빠른 응답을 제공해야 합니다.

2. ISR과 조합:

자주 업데이트되는 데이터를 처리하려면 ISR과 SSG를 조합하세요.

3. Fallback 설정:

동적 라우팅의 경우 fallback 옵션을 상황에 맞게 설정하세요. 실시간 데이터를 처리하려면 'blocking'이 적합할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당!🌷

 

Static Generation은 빠른 로딩 속도와 SEO 최적화를 모두 잡을 수 있는 강력한 기능입니다. Next.js의 정적 생성을 활용하여 최고의 사용자 경험을 제공해 보세요! 🚀