정적 페이지 업데이트하기 - ISR

 

SSG(정적 생성): 빌드하는 과정에서 페이지를 생성, 페이지 요청 경우 이미지 생성된 정적 페이지 제공.

SSG는 페이지들을 서버에 모두 만들어둔 뒤, 요청 시 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어 캐싱해두면 좋은 페이지에 적합하다.

 

정적 페이지 업데이트가 필요하여 Next.js에서 제공하는 ISR을 적용하였습니다.

ISR이란?

• 정적페이지를 새롭게 추가하거나 업데이트 할 수 있도록 하는 Next.js 기능.
• ISR은 페이지의 정적인 부분만 미리 렌더링한 후, 사용자가 필요로하는 동적 데이터를 렌더링할 수 있습니다. ISR은 빌드시간 더 빠르게하고 특정 주기마다 재생성하는 페이지와 캐시를 자동으로 무효화할 수 있게합니다.
• 전체 사이트를 다시 빌드하지 않아도된다.

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

// getStaticProps는 서버사이드에서 빌드 시에 호출된다.
// 유효성을 재확인(revalidation)하도록 설정해두었다면, 새로운 요청이 들어올 때 다시 호출된다.
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js는 요청 후 10초가 지난 이후에 또 요청이 들어오면 페이지를 다시 생성하려는 시도를 한다
    revalidate: 10, // In seconds
  }
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: blocking } will server-render pages
  // on-demand if the path doesn't exist.
  return { paths, fallback: 'blocking' }
}

export default Blog

 

동작원리

• 빌드타임에서 정적 파일을 만들고 응답합니다.
• 이 페이지에 대한 최초 요청 이후 10초 미만 경우 캐시된 정적 페이지 응답.
• 10초 후 Next.js 캐시된 정적 페이지로 응답하지만 추가로 백그라운에서 페이지 재생성
• Next.js는 변경된 재생성 페이지를 클라이언트에게 응답. (실패시 기존 페이지가 변경되지 않고 보여짐)
  
•  10초(즉 revalidate 기준 시간)가 흐른 뒤에도 해당 페이지에 대한 새로운 요청이 발생하지 않는다면 페이지 재생성은 이루어지지 않는다.