[13 | Next.js] 넥스트 프로젝트에서 ISR 하는 법

넥스트 13버전의 docs인 Using App Router 에는 ISR 이라는 키워드를 직접적으로 찾을 수 없었다. 

정의를 알고싶다면 Pages Router ( Next 12) 에서 검색해보면 된다. 

 

App기반 docs에서 ISR을 검색하면 Data fetching 과 관련된 내용이 나오는데 revalidate 라는 키워드와 직접 연관이 있기 때문인 거 같다.

• Next 에서는 Time-based Revalidation 라고 명시되어 있는데 이 키워드가 ISR과 동일한 개념인 거 같다.

 

ISR(Incremental Static Regeneration) 

Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 업데이트할 수 있다. 증분 정적 재생성(ISR)을 사용하면 전체 사이트를 다시 빌드할 필요 없이 페이지 단위로 정적 생성을 사용할 수 있다. ISR을 사용하면 정적 페이지(SSG)의 이점을 유지하면서 수백만 페이지로 확장할 수 있다. -Next 공식 홈페이지 Page Router (next 12ver docs)-

• 공식 홈페이지에서는 위와 같이 설명하고 있다. 
• 서버 컴포넌트는 기본적으로 SSG 로 페이지를 구성하는데 만약 일정 주기마다 데이터를 업데이트 시켜줘야 한다면(단, 유저에게 실시간으로 반영되지 않아도 괜찮은 중요하지 않은 데이터) SSR 말고 ISR로도 충분하다. 

[ ISR 적용하는 법 ]

ISR은 어떤 주기로 data를 revalidate* 하는 것 이라고 생각하면 된다. 
revalidate - 그때마다 HTML을 새롭게 만드는 것

 

ISR을 적용하는 단위는 크게 2가지이다.

1. [요청 함수 단위] 특정 fetch 함수에 revalidate 옵션을 전달
2. [페이지 단위] page 전체에 revalidate 를 적용 ⇒ 이때 사용하는게 Segment Config Options이다. (해당 방법이 1번의 대안책이라고 나와있다.)

페이지 단위에 적용할 때에는 정적으로 렌더링되는 page 컴포넌트에 아래와 같이 코드를 삽입해주면 된다. 

 export const revalidate = 3;

• 변수의 위치는 당연히 PageComponent와 같은 위치에 작성해줘야 한다. (해당 컴포넌트의 중괄호 안에 변수를 작성X)

요청 함수 단위에 적용할 때에는 fetch 함수의 두번째 인자로 revalidate 옵션을 설정해주면 된다.

• fetch 의 두번째 인자로 객체 옵션을 넘기고 next에게 revalidate 옵션을 주면 요청 함수의 데이터에 ISR을 적용할 수 있다.

import React from "react";
import Link from "next/link";
import { getProducts } from "@/service/products";

export const revalidate = 3;

export default async function ProductsPage() {
  const products = await getProducts();
 const res = await fetch("https://meowfacts.herokuapp.com", {
    next: { revalidate: 1 }, //1초간격
  });
  const data = await res.json();
  const factText = data.data[0];
  return (
    <div>
      <h2>Products</h2>
      <ul>
        {products.map(({ id, name }, index) => (
          <li key={index} style={{ listStyle: "none" }}>
            <Link href={`/products/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

+ 추가정보 )

[ ISR  => SSR 설정 ]

아래와 같이 revalidate 옵션값을 0 으로 주게되면 ISR 이 아니라 SSR 을 한다.

• 확인 방법은 개발자도구 > 네트워크 (서버에서 보내주는 html에 text가 미리 만들어져서 오는 지 확인해보면 된다.)

const res = await fetch("https://meowfacts.herokuapp.com", {
    next: { revalidate: 0 }, // 0초 == SSR
  });

[ revalidate: 0 옵션 대안책 ]

똑같이 revalidate : 0 옵션과 동일한 동작을 하는 옵션이 있다. 

• revalidate 말고도 cache 옵션값을 no-store 로 주면 SSR 처럼 동작하게 된다(요청이 올때마다 렌더링).
• 즉, 요청할 때마다 HTML을 서버에서 렌더링하여 만든다음에 클라이언트로 전달해준다.
• cache 옵션의 위치는 revalidate의 위치와 동일하다. 

cache: 'no-store' // cache-force(default)

 

🐱‍🐉 마지막으로 Next에서는 여러 컴포넌트에서 중복되는 fetch 요청이 들어와도 알아서 최적화를 해주기 때문에 이 요청이 여러 번 될까봐 신경쓰지 않아도 된다. 단, POST 요청은 중복 제거를 하지않기 때문에 사용 시 유의해야 한다.