[Next.js] Page Router - ISR

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.17) ISR 1. 소개 및 실습
2.18) ISR 2. 주문형 재 검증

2.17 ISR 1. 소개 및 실습

ISR이란?

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

SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술

 

기존 SSG 방식에서는 빌드 타임에 미리 생성한 페이지가 이 시간 이후에는 다시 생성되지 않기 때문에 페이지를 다시 요청해도 동일한 페이지만 계속 반환되었는데, ISR 방식으로 페이지를 다시 생성함으로써 새로운 요청이 발생했을 때 새로 생성된 페이지를 보여줄 수 있다.

 

ISR의 장점

1. 미리 생성해둔 정적페이지를 응답하기 때문에 매우 빠른 속도로 동작한다. (SSG의 장점)

2. 특정 시간을 주기로 페이지를 다시 생성해서 최신 데이터까지 함께 반영할 수 있다. (SSR의 장점)

 

ISR 설정 방법

export const getStaticProps = async () => {
  console.log("인덱스 페이지");
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: { allBooks, recoBooks },
    revalidate: 3, // 추가된 부분 (초 설정)
  };
};

적용된 페이지

적용한 페이지는 index 페이지 인데 여기에서 '지금 추천하는 도서' 부분은 랜덤하게 3개의 도서를 보여주는 페이지이다.

ISR을 적용하기 전까지는 빌드타임에서 생성된 페이지만 보이기 때문에 새로고침을 해도 동일한 화면이 보였는데,

ISR을 적용한 이후에는 새로운 페이지가 적용되어 다른 추천 도서들이 뜨는 것을 확인할 수 있었다.

 

강의에서는 3초의 revalidate를 설정했지만, 페이지 생성의 주기의 결과를 명확하게 확인하기 위해서 60초로 설정하고 페이지를 다시 빌드해봤다. 60초가 되기 전까지는 새로고침해도 빌드타임에 생성된 페이지가 반환되었지만, 60초가 지나고 60초 주기로 새로운 페이지가 재생성 되는 것을 확인할 수 있었다.

---

2.18 ISR 2. 주문형 재 검증

ISR 방식을 적용하기 어려운 케이스

 

사용자의 행동을 기반으로 데이터가 업데이트 되는 페이지

 

예시 1. revalidate를 60분으로 설정되어 있는 페이지에서 유저가 60분이 되기 전에 데이터를 수정한 경우, 아직 재생성되는 시간인 60분이 되기 전이기 때문에 수정한 내용을 페이지에 반환할 수 없다.

 

예시 2. revalidate를 60초로 설정되어 있는 페이지에서 유저가 하루 뒤에 데이터를 수정한다면, 수정된 내용이 없는데도 페이지는 60초마다 불필요하게 재생성된다.

 

On-Demand ISR

요청을 받을 때마다 페이지를 다시 생성하는 ISR

On-Demand ISR을 확용하면 시간을 기반으로 불필요하거나 또는 너무 늦게 페이지를 재생성하는 케이스들은 제거되고 실제로 유저가 게시글을 수정해서 페이지의 업데이트가 필요해졌을 때 revalidate 요청을 보내서 페이지를 재생성 할 수 있다.

 

즉, 페이지의 업데이트를 직접 트리거 할 수 있다는 뜻이다.

 

revalidate trigger API

기존의 index에 적용했던 revalidate를 제거하고, 아래 API를 생성함으로써 On-Demand ISR을 수행할 수 있다.

import { NextApiRequest, NextApiResponse } from "next";

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

 

빌드하고 페이지를 요청하고 새로고침을 해도 빌드타임에 만들어진 페이지가 동일하게 보인다.

localhost:3000/api/revalidate 로 api 요청을 보내고 다시 페이지를 새로고침하면 새로운 추천도서가 보이는 것을 확인할 수 있다.