[Next.js] - Pages Router 기반 ISR (+On-demand Revalidation)

ISR(Incremental Static Regeneration, 증분 정적 재생성)

 

말이 다소 어렵게 보이지만 단순히 SSG방식의 응용이라 할 수 있는 방법입니다.

ISR은 SSG방식에 정적인 페이지를 생성하는 방법에 revalidate를 통해 유효기간을 설정하여 유효기간이 지난 생태에서는 getStaticProps()를 통해 화면을 다시 그리고 페이지를 업데이트합니다.

revalidate: 60초라고 했을때 60초 이내에 새로고침을 하더라도 동일한 데이터가 보입니다.

유통기한이 끝난 60초 이후에 새로운 데이터를 받아오게 됩니다.

 

export const getStaticProps = async () => {
  return {
    props: { },
    revalidate: 3, // 초단위로, 3초마다 재생성(재검증)
  };
};

 

ISR (주문형 재 검증, On-Demand-ISR)

유효기간이 아니라 사용자의 행동에 따라 데이터가 업데이트 되는 페이지를 만들고 싶을때 사용하는 방법

즉, 요구(on-demand)사항이 주어졌을때 마다 페이지를 다시 생성하는 방법

SSR를 사용해도 되지만 많은 트래픽이 요구되는 화면일 경우 서버 과부하등으로 인해 정적인 방법사용할 수 있으면 정적인 방법을 사용하는것이 더 좋은 방법입니다.

 

예제

먼저 SSG방식으로 revalidate를 제거해줍니다.

export const getStaticProps = async () => {
  console.log("getStaticProps 한번만 호출되는지 확인하는 로그");

  const allBooks = await fetchBooks()

  return {
    props: {
      allBooks
    }
  };
};

 

pages폴더 -> api 폴더에 revalidate.ts를 생성합니다.

res.revalidate()를 통해서 어떤 페이지를 revalidate할지 정합니다.

import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await res.revalidate("/"); // 어떤 페이지를 revalidate 할지 정함
    return res.json({ revalidated: true });
  } catch {
    return res.status(500).send("Error Revalidating");
  }
}

 

그 이후 어떠한 요청 로직에 revalidate api를 호출하면 유효기간에 상관없이 바로 업데이트된 페이지를 볼 수 있습니다.

특정 조건에 따라서 업데이트되어야 하는 정적페이지로써 유지하고 싶을때 유용한 방식입니다.

 

ISR방식은 대부분의 케이스를 커버할 수 있는 강력한 사전렌더링 방식이기 때문에 많이 사용되고 있습니다.