ISR

isr (incremental static regeneration) 으로 증분 정적 재생성이다.
즉, 그냥 ssg 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술이다.

사용 방법

export const getStaticProps = async () => {

  console.log("인덱스 페이지");
  const [allbooks, recombooks] = await Promise.all([
    fetchbook(),
    fetchrandom(),
  ]);
  // const allbooks = await fetchbook()가 아닌 위와 같이 병렬로 코드 수정함

  return {
    props: { allbooks, recombooks },
    revalidate: 3, 
  
  };
};

revalidate

revalidate는 재검증하다는 뜻으로 isr을 적용시키는 코드이다. 몇초 주기인지 명시해서 사용한다.

단점

시간과 관계없이 사용자의 행동 따라 데이터가 업데이트 되는 페이지같은 경우는 ISR를 적용시키기 힘들다. 그래서 Next에서는 사용자의 행동에 따라 데이터가 업데이트 되는 On-Demand ISR를 지원한다.

Ex) 커뮤티니 사이트의 게시글 페이지 -> 게시글 수정,게시글 삭제

On-Demand ISR

On-Demand ISR 즉, 요청을 받을 때 마다 페이지를 다시 생성하는 ISR이다.
ISR의 장점인 ssg+ ssr을 통해 사용자의 요청에 따라 페이지를 다시 생성하므로 많이 쓰이고 있다.

사용방법

pages/api 디렉토리에 아래와 같은 파일을 만든다.

import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await res.revalidate("/");
    return res.json({ revalidate: true });
  } catch (err) {
    res.status(500).send("revalidate failed");
  }
}

해당 컴포넌트가 실행이 되면 "/"경로의 컴포넌트가 res.revalidate("/");를 통해 On-Demand ISR가 적용이 된다.