1. ISR (증분 정적 재생성)

• SSG 방식의 경우, 속도는 빠르지만 최신 데이터를 반영할 수 없는 문제가 존재했다.

• ISR 방식은 이 문제를 해결하기 위해. SSG 방식이지만, 일정 시간 이후에는 사전 렌더링을 다시 실행해서 최신 데이터를 반영하는 등의 작업을 수행할 수 있다.

• 지정된 시간이 경과한다고 바로 사전 렌더링이 실행되는 것이 아니라, 지정된 시간이 흐른 뒤에 요청이 들어온다고 하면. 일단 이전에 렌더링 한 페이지를 반환해주고, 그 다음에 사전 렌더링을 다시 실행한다.

• 즉, ISG이란 SSG와 SSR의 장점들을 모두 혼합한 매우 강력한 렌더링 전략이다. Next.js를 사용한다고 하면 가장 추천되는 방식!

2. ISR의 사용방법.

export const getStaticProps = async () => {

  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: {
      allBooks,
      recoBooks,
    },
    revalidate: 3,
  };
};

• getStaticProps 함수 내부의 return 키워드 내부에 revalidate 옵션을 추가해주면 된다. 시간의 단위는 1000ms. 3이라고 하면 3000ms = 3초.

• ISR의 정상 적용 여부는 Build 결과에서 확인할 수 있다.

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

• ISR의 추가적인 기능. ISR은 Next.js를 사용할 때, 가장 추천되는 전략이지만. ISR 방식을 적용하기 어려운 페이지들도 분명 존재한다.

• 예를 들어, 게시판. 여기는 일정 시간을 기준으로 데이터가 업데이트되지 않는다. 사용자들이 언제든 게시글을 생성하고 수정, 삭제할 수 있기 때문. 그렇기에 ISR 방식을 사용할 수가 없다.

• 그렇다고 SSR을 사용하기도 어렵다. 서버에서 부담하는 요소들이 너무 많아, 게시판같이 사용자들이 몰리는 서비스에서는 자칫 서버가 마비될 수도 있기 때문.

• 이럴 때 사용할 수 있는 것이 바로, 주문형 재 검증 (On-Demand-ISR). 시간을 기반으로 하지 않고, 요청을 기준으로 페이지를 새로 렌더링하는 방식이다.

On-Demand-ISR 사용해보기.

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("Revalidation Failed");
  }
}

• getStaticProps 함수에서 revalidate 옵션을 쓰는 것이 아니라, revalidate API 함수를 새로 만들어준다.

• revalidate (재생성)하려는 페이지의 경로를 revalidate 함수의 인수로 넣어준다.

• 해당 페이지의 재생성이 성공했다면, 그 결과를 json 형식으로 반환해준다. 실패한다면 500 코드와 실패 메시지를 반환해준다.

• 학습 프로젝트 기준으로, api/revalidate 경로로 요청을 보내면, '/' 경로에 해당하는 페이지가 On-Demand-ISR 방식으로 재생성되는 것.

• Next.js를 사용하는 서비스라고 한다면 기본적으로 On-Demand-ISR을 사용한다.

00. 강의 소개.

• 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.