로고

ISR을 활용한 페이지 업데이트: 증분 정적 재생성의 원리와 구현 방법.

작성일 :

ISR을 활용한 페이지 업데이트: 증분 정적 재생성의 원리와 구현 방법

ISR의 개요

ISR(Incremental Static Regeneration, 증분 정적 재생성)은 Next.js와 같은 프레임워크에서 제공되는 기술로, 정적 사이트 생성(Static Site Generation, SSG)과 서버 측 렌더링(Server-Side Rendering, SSR)의 장점을 결합합니다. 전통적인 SSG는 빌드 시점에 모든 페이지를 미리 생성하지만, ISR은 필요에 따라 페이지를 재생성하여 최신 데이터를 유지합니다.

SSG와 SSR의 한계

정적 사이트 생성은 성능과 보안 면에서 많은 이점을 가지고 있지만, 데이터가 업데이트될 때마다 빌드를 다시 해야 하는 단점이 있습니다. 반면 서버 측 렌더링은 매 요청마다 페이지를 동적으로 생성하기 때문에 항상 최신 데이터를 제공할 수 있지만, 성능 면에서 부담이 됩니다.

ISR의 접근 방식

ISR은 이러한 문제를 해결하기 위해, 설정된 주기마다 페이지를 재생성하여 최신 데이터를 반영합니다. 이 방식은 사용자가 초기 요청 시 정적 페이지를 빠르게 제공받을 수 있는 동시에, 백그라운드에서 최신 데이터를 기반으로 페이지를 업데이트합니다.

ISR의 동작 원리

ISR의 핵심은 getStaticProps 함수에 있습니다. 이 함수는 SSG를 사용하여 페이지를 미리 생성하는데 사용됩니다. ISR은 이 함수의 revalidate 속성을 활용하여 페이지 재생성 주기를 설정합니다.

getStaticProps 함수

getStaticProps는 빌드 시점과 실행 시점에서 데이터를 가져와 페이지를 생성하는 기능을 합니다. 이 함수는 데이터를 비동기 방식으로 가져오며, 리턴 값으로 페이지의 프로퍼티를 설정합니다.

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

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

revalidate 속성

revalidate 속성은 페이지를 재생성할 주기를 설정합니다. 위의 코드 예제에서 revalidate: 10으로 설정된 값은 Next.js가 10초마다 페이지를 재생성하도록 합니다. 이 설정 덕분에 페이지는 오래된 데이터를 보여주지 않고 최신 상태를 유지할 수 있습니다.

ISR의 구현 방법

ISR을 구현하기 위해서는 Next.js 프로젝트를 준비하고, 필요한 데이터 fetching 로직을 작성한 후, getStaticProps 함수에 revalidate 속성을 추가하면 됩니다.

Next.js 프로젝트 설정

먼저 Next.js 프로젝트를 생성합니다.

bash
npx create-next-app my-isr-app
cd my-isr-app
npm install

데이터 fetching 로직 작성

데이터를 가져오는 로직을 작성합니다. 예제로는 공공 API를 사용하여 데이터를 가져오는 방법을 보여드립니다.

javascript
// pages/index.js
import React from 'react';

export default function Home({ data }) {
  return (
    <div>
      <h1>ISR Example</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

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

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

업데이트 주기 테스트

ISR이 제대로 작동하는지 확인하려면, 데이터를 업데이트하는 주기를 설정하고 사용자 요청 시 페이지가 재생성되는지 테스트합니다. 이를 확인하려면 서버를 실행한 후, 데이터를 변경하고 설정된 주기(예: 60초)가 지난 후 페이지를 다시 로드해보면 됩니다.

bash
npm run dev

ISR의 장단점

ISR은 많은 이점을 제공합니다. 특히 성능과 최신 데이터 제공 측면에서 매우 유용합니다.

장점

  • 성능 최적화: 초기 렌더링이 매우 빠릅니다.
  • 최신 데이터 유지: 주기적으로 최신 데이터를 반영합니다.
  • 유연성: 부분적으로만 페이지를 재생성합니다.

단점

  • 복잡성 증가: 설정 및 관리가 복잡할 수 있습니다.
  • 일관성 문제: 재생성 주기 동안 데이터가 진부해질 수 있습니다.

결론

ISR은 SSG와 SSR의 장점을 모두 활용할 수 있는 강력한 기능입니다. 이를 통해 성능 최적화와 최신 데이터 제공이 동시에 가능해, 사용자 경험을 크게 향상시킬 수 있습니다. Next.js에서 getStaticProps와 revalidate 속성을 활용하여 쉽게 ISR을 구현할 수 있으니, 프로젝트 요구사항에 맞춰 활용해 보시기 바랍니다.