[Next.js] ISR이란? / 사용법

ISR 이란?

이미 빌드된 웹에, 정적 페이지를 새롭게 추가하거나, 업데이트 할 수 있도록 하는 Next.js 기능

( next build 를 지원하는 곳에서 작동한다 )

 

ISR 사용법

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

// 이 함수는 서버사이드에서, 빌드시에 실행(호출)됨
// 만약 서버사이드에서 다시 호출된다면, 재검증이 활성화되고 새로운 요청이 들어옴
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js가 페이지를 재생성 시도
    // - 새로운 요청 들어왔을때, 최대 10초에 한번 생성
    revalidate: 10,
  }
}

// 이 함수는 서버사이드에서, 빌드시에 실행(호출)됨
// 서버사이드에서 다시 호출되어도, path는 다시 생성되지 않는다.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 우리가 미리 렌더링(pre-render)하길 원하는 paths를 posts기반으로 가져오기
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 이 paths는 빌드시에만 미리 렌더링된다.
  // { fallback: blocking } 은 서버사이드에서 페이지를 렌더링한다
  // 만약 paths가 존재하지 않는다면, Next.js가 자동으로 paths를 생성한다. (on-demand)
  return { paths, fallback: 'blocking' }
}

export default Blog

 

unstable_revalidate() - beta

revalidate는 유효시간 경과후 해당 페이지를 방문하는 사람이 존재해야, 캐시를 제거 할 수 있지만,

unstable_revalidate() 를 사용하면, 새로 업데이트된 페이지의 캐시를 수동으로 제거할 수 있다.

[ 사용하기 좋은 예 ]
헤드리스 CMS 콘텐츠를 생성, 업데이트 할때
전자상거래 메타데이터 변경할때(가격, 설명, 카테고리 등등)

// pages/api/revalidate.js

export default async function handler(req, res) {
  // 이 요청이 올바른지 확인하기 위해 암호 확인
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // error 발생시, Next.js가 마지막으로 생성된 페이지를 보여준다.
    return res.status(500).send('Error revalidating');
  }
}

 

getStaticProps에서 revalidate()를 사용할 필요가 없다.

revalidate()를 생략하면, on-demand 페이지에 unstable_revalidate() 요청시에만 재검증한다.