Data Fetching > Incremental Static Regeneration [공식 문서로 공부하는 Next.js]

Incremental Static Regeneration

Basic Features > Data Fetching > Incremental Static Regeneration

 

ISR는 페이지별로 정적 생성 할 수 있는 기능입니다.

 

 

Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 업데이트할 수 있습니다. ISR(Incremental Static Regeneration)을 사용하면 전체 사이트를 다시 빌드할 필요 없이 페이지별로 정적 생성을 사용할 수 있습니다. ISR을 사용하면 수백만 페이지로 확장하면서 정적의 이점을 유지할 수 있습니다.

 

ISR을 사용하려면 getStaticProps에 revalidate Props를 추가하면 됩니다.

 

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// 이 함수는 서버 측에서 빌드시 호출됩니다.
// 재검증이 활성화되고 새 요청이 들어오면 serverless 함수에서 다시 호출될 수 있습니다.
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js 는 페이지 재 생성을 시도합니다.
    // - 요청이 들어왔을 때
    // - 최대 10초마다 한번
    revalidate: 10, // 초당
  }
}

// 이 함수는 서버 측에서 빌드시 호출됩니다.
// 재검증이 활성화되고 새 요청이 들어오면 serverless 함수에서 다시 호출될 수 있습니다.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // posts에 있는 사전 렌더링할 paths를 가져옵니다.
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 빌드시 이런 paths만 사전 렌더링을 합니다. 
  // { fallback: blocking }은 경로가 존재하지 않는 경우 요청 시 페이지를 서버 렌더링합니다.
  return { paths, fallback: 'blocking' }
}

export default Blog

 

빌드 시 사전 렌더링된 페이지에 대한 요청이 이루어지면 처음에는 캐시된 페이지가 표시됩니다.

 

ISR이 동작하는 순서입니다.
1. 초기 요청 후 10초 전(revalidate: 10)에 페이지에 대한 모든 요청도 캐시되고 즉각적입니다.
2. 10초 후 다음 요청은 여전히 캐시된(부실) 페이지를 표시합니다.
3. Next.js는 백그라운드에서 페이지 재생성을 트리거합니다.
4. 페이지가 성공적으로 생성되면 Next.js는 캐시를 무효화하고 업데이트된 페이지를 표시합니다. (백그라운드 재생성이 실패하면 페이지는 여전히 변경되지 않습니다.)

 

생성되지 않은 경로에 대한 요청이 발생하면 Next.js는 첫 요청에서 해당 페이지를 서버 렌더링합니다. 이후 요청은 캐시에서 정적 파일을 제공합니다.

ISR은 캐시를 전역적으로 유지하고 롤백을 처리하는 방법을 다룹니다.

 

---

 

Data Fetching: Incremental Static Regeneration | Next.js