12. ISR (점진적 정적 재생성) – ISR의 개념과 Next.js에서의 활용

 웹사이트를 개발하면서 중요한 문제 중 하나는 데이터가 변경되었을 때 빠르게 반영할 수 있는 방법입니다. **ISR(Incremental Static Regeneration)**은 이러한 문제를 해결해주는 Next.js의 강력한 기능입니다. 이번 글에서는 ISR의 개념과 이를 Next.js에서 어떻게 활용할 수 있는지에 대해 설명하겠습니다.

1. ISR(점진적 정적 재생성)란?

ISR은 **정적 사이트 생성(SSG)**의 장점과 **서버 사이드 렌더링(SSR)**의 장점을 결합한 방식입니다. SSG에서는 페이지를 빌드 시점에 미리 생성하지만, 데이터가 변경되었을 때 다시 빌드를 해야 하는 단점이 있습니다. 반면 ISR은 이미 생성된 정적 페이지를 필요에 따라 점진적으로 재생성하여 최신 상태를 유지할 수 있도록 합니다.

이 방식은 데이터가 자주 변경되지 않는 페이지는 정적으로 제공하고, 변화가 잦은 데이터는 주기적으로 갱신하여 효율성을 극대화합니다.

2. Next.js에서 ISR 활용하기

Next.js에서는 ISR을 revalidate 옵션을 사용하여 쉽게 구현할 수 있습니다. 이 옵션은 페이지가 특정 시간 간격마다 자동으로 재생성되도록 설정할 수 있습니다. getStaticProps 함수 내에서 revalidate를 설정하면 됩니다.

예시: ISR 구현하기

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

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

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: 'blocking' };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

위 코드에서 revalidate: 10 옵션을 설정하면, 해당 페이지는 10초마다 재생성됩니다. 즉, 페이지 요청 시 최신 데이터가 반영될 수 있습니다. 이와 같은 방식으로 자동으로 갱신되는 페이지를 제공할 수 있습니다.

3. ISR의 장점

ISR은 여러 가지 장점을 제공합니다. 그 중 가장 큰 장점은 성능 최적화와 데이터 갱신을 동시에 해결할 수 있다는 점입니다.

1. 빠른 페이지 로딩: ISR을 사용하면 초기 페이지는 정적으로 빠르게 로딩되며, 변경된 내용만 재생성하여 최적화된 성능을 제공합니다.
2. 데이터 최신성 유지: revalidate 값을 설정하면, 데이터를 주기적으로 갱신할 수 있어 최신 상태의 정보를 제공할 수 있습니다.
3. 서버 부하 절감: 전체 페이지를 매번 서버에서 렌더링하지 않고, 필요한 페이지만 점진적으로 갱신하므로 서버 부하를 줄일 수 있습니다.

4. ISR과 SSG, SSR의 차이점

• SSG (Static Site Generation): 페이지를 빌드 시점에 미리 생성하고, 이후에는 변경되지 않음.
• SSR (Server Side Rendering): 페이지를 요청할 때마다 서버에서 렌더링하여 최신 데이터를 제공.
• ISR (Incremental Static Regeneration): SSG와 SSR의 장점을 결합하여, 정적 페이지를 필요에 따라 재생성하여 최신 데이터를 제공합니다.

5. 결론

ISR은 Next.js의 유용한 기능으로, 정적 사이트 생성의 장점은 그대로 유지하면서, 변경된 데이터를 주기적으로 갱신할 수 있는 기능입니다. 이를 통해 웹사이트의 성능을 최적화하고, 최신 데이터를 제공할 수 있습니다. 데이터가 자주 변경되지 않는 페이지에서는 SSG를, 자주 업데이트되는 페이지에서는 ISR을 활용하여 최적의 성능을 얻을 수 있습니다.

11. SSG (정적 사이트 생성) – Next.js에서의 정적 사이트 생성과 사용

 웹사이트의 성능과 SEO 최적화를 고려할 때, **정적 사이트 생성(SSG, Static Site Generation)**은 매우 중요한 기술입니다. 이번 글에서는 Next.js에서 정적 사이트 생성을 어떻게 구현할 수 있는지, 그리고 이 방식이 왜 중요한지에 대해 알아보겠습니다.

1. 정적 사이트 생성(SSG)란?

**정적 사이트 생성(SSG)**은 웹 페이지의 HTML을 빌드 시점에 미리 생성해 두고, 클라이언트에서 요청할 때마다 빠르게 전달하는 방식입니다. 이는 **서버 사이드 렌더링(SSR)**과 비교했을 때, 서버에 부담을 덜어주고, 페이지를 즉시 로드할 수 있는 장점이 있습니다. 또한, 정적으로 생성된 HTML 파일은 CDN(콘텐츠 전송 네트워크)을 통해 빠르게 제공되므로, 사이트 속도가 매우 빠릅니다.

2. Next.js에서 SSG 사용하기

Next.js는 정적 사이트 생성을 간편하게 사용할 수 있도록 getStaticProps와 getStaticPaths라는 두 가지 메서드를 제공합니다. 이를 통해 데이터를 미리 가져와 정적 HTML 파일을 빌드 시점에 생성할 수 있습니다.

예시: SSG 페이지 만들기

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

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

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

위 코드에서 getStaticProps 함수는 빌드 시점에 실행되어 API에서 데이터를 가져오고, 이 데이터를 컴포넌트에 전달합니다. 이렇게 하면 페이지가 빌드될 때 HTML이 미리 생성되며, 클라이언트는 그 HTML을 빠르게 렌더링할 수 있습니다.

3. getStaticPaths를 사용한 동적 경로 처리

동적 경로를 가진 페이지에서도 SSG를 사용할 수 있습니다. 예를 들어, 블로그 글이 여러 개 있을 때, 각 블로그 글의 상세 페이지를 정적으로 생성하려면 getStaticPaths와 getStaticProps를 함께 사용해야 합니다.

예시: 동적 경로와 SSG 사용하기

// 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 },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

위 코드에서 getStaticPaths는 모든 동적 경로를 미리 생성하고, getStaticProps는 각 동적 경로에 해당하는 데이터를 가져옵니다. 이 방식으로 동적 경로의 페이지도 빌드 시점에 정적으로 생성할 수 있습니다.

4. SSG의 장점

1. 빠른 로딩 속도: 정적으로 생성된 HTML은 서버에서 렌더링하지 않고, 미리 생성된 파일을 클라이언트에 전달하기 때문에 매우 빠르게 로드됩니다.
2. SEO 최적화: 서버에서 미리 렌더링된 HTML을 제공하기 때문에, 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있어 SEO에 유리합니다.
3. 서버 부담 감소: SSG는 서버에서 렌더링을 하지 않으므로, 서버에 대한 부담을 줄이고, 트래픽이 많아도 안정적인 성능을 유지할 수 있습니다.

5. SSG와 다른 렌더링 방식의 비교

• SSG: 페이지를 빌드 시점에 미리 렌더링하고 정적 HTML로 제공. 빠른 로딩과 SEO 최적화에 유리.
• SSR: 페이지를 요청할 때마다 서버에서 렌더링하고 HTML을 제공. 동적 데이터가 필요한 페이지에 유리.
• CSR: 클라이언트에서 JavaScript를 실행하여 렌더링. 초기 로딩 속도가 느릴 수 있지만, 이후 페이지 전환은 빠름.

6. 결론

**정적 사이트 생성(SSG)**은 웹 애플리케이션의 성능을 극대화하고, SEO 최적화에 매우 효과적인 방법입니다. Next.js에서는 getStaticProps와 getStaticPaths를 통해 손쉽게 SSG를 구현할 수 있으며, 이를 통해 미리 생성된 정적 HTML 파일을 클라이언트에 빠르게 전달할 수 있습니다. SSG를 활용하면 웹사이트의 로딩 속도를 개선하고, SEO 성능을 높일 수 있습니다.