[내일배움캠프 TIL] 68일차

Jaehyeon Ye·2023년 2월 2일
0

오늘 새로 배운 것

ISR(Incremental Static Regeneration)

SSG 이름 그대로 정적인 페이지를 보여주므로 내용 업데이트 시 최신화된 정보를 보여주기 어려운 단점이 있다.
이를 보완하기 위해 일정 주기마다 페이지를 build 시켜주는 ISR 방식이 있다.

export async function getStaticProps(context: any) {
  const { id } = context.params;

  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
    // `http://localhost:3001/posts/${id}`
  );
  const post = await response.json();

  return {
    props: {
      post,
    },
    revalidate: 5,
  };
}

이렇게 revalidate에 5(초)라는 값을 입력함으로써 5초마다 페이지를 build 해주게 된다.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
      { params: { id: '3' } },
    ],
    fallback: 'blocking', 
  };
}

그리고 동적 라우팅을 제공하는 코드 부분인데 어떤 path를 SSG할지 정해두는 역할을 한다. getStaticProps 함수가 있어야 실행된다.

fallback은 위의 경우처럼 blocking을 해두면 getStaticPaths에서 제공하는 페이지가 아니라면 페이지를 서버에서 생성한 이후 보여주게 되고, true일 경우는 fallback 페이지를 보여주고 해당 페이지를 서버에서 생성 후 보여준다.
false일 경우에는 위에서 제공하지 않는 페이지는 404 처리한다.

robots.txt는 검색엔진 봇의 접근을 막고 싶은 부분을 따로 설정하기 위한 파일로 public 폴더 안에 위치한다.

profile
FE Developer

0개의 댓글