ISR 활용 & getStaticPath

ISR (증분 정적 생성)

• getStaticProps 함수는 build 스크립트로 프로젝트를 빌드할 때 실행됨➡️데이터가 자주 변경될 경우에는 또 다시 build를 하고 배포해야 하는 문제 발생
• ISR(Incremental Static Regeneration)을 사용하면 전체 사이트를 재구축할 필요 없이 페이지별로 정적 생성을 사용할 수 있음

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);

  return {
    props: {
      products: data.products,
    },
      revalidate: 10
  };
}

• revalidate를 통해 최대 n초마다 들어오는 모든 요청에 대해 주어진 페이지를 재생성할 수 있음

getStaticPaths

• 동적 페이지에서는 getStaticProps 사용 불가➡️하나의 페이지가 아닌 여러 페이지로 이루어지기 때문, 서버가 그때 그때 생성함
• getStaticPaths를 통해 페이지를 사전 렌더링하도록 할 수 있음
• 동적 페이지의 어떤 구체적인 인스턴스를 사전 생성할지 알려주는 함수
• 코드 예시

// [[pid].js
export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
    ],
    fallback: false,
  };
};

export default ProductDetailPage;

• paths를 통해 사전에 생성되어야 하는 페이지를 알려줌

getStaticPaths - fallback

1. fallback: true

• path에 포함되지 않은 페이지라도 작동하도록 해줌➡️포함되지 않은 페이지는 요청이 서버에 도달한 순간 생성됨
• 방문이 높은 페이지는 사전 생성하고, 방문이 적은 페이지는 필요한 경우에만 생성되도록 할 수 있음
• but url을 직접 입력해서 접근하게 되면 동적생성이 끝나기 전에 접근한 거라 오류가 발생함➡️사전 생성된 데이터가 있는지 확인 필요

const ProductDetailPage(props) {
  const { loadedProduct } = props;
  if (!loadedProduct) return <div>Loading...</div>;
  return (
    <>
      <h1>{loadedProduct.title}</h1>
      <p>{loadedProduct.description}</p>
    </>
  );
};

2. fallback: 'blocking'

• 서버에 완전히 사전 생성될 때까지 기다렸다가 페이지를 보여줌➡️페이지가 보여지는 시간은 길어지지만, 불완전한 페이지가 사용자에게 보여지지 않도록 할 수 있음