<Next.js>getStaticProps 옵션과 getStaticPaths()

getStaticProps 구성 옵션

export async function getStaticProps(context){
  // ... 이하 코드 생략
  
   if(!data) {
    return {
      redirect : {
        destination : "/"
      }
    }
  } // 데이터 자체가 없을 때, 메인 페이지로 이동.
  
    if (data.products.length === 0) {
    return {
      notFound: true,
    };
  } 
  // 데이터가 하나도 없으면 notFound를 true로 설정하고 404 페이지로 이동합니다. (데이터 페칭에 실패할 경우)
  
	return {
    props: {
      products: data.products,
    },
    revalidate: 60,
    notFound : false,
  };
}

revalidate : 60초마다 서버에서 데이터를 새로 받아옵니다.
notFound : true로 설정하면 페이지가 404 오류를 반환합니다. 그에 따라 404 오류페이지로 이동합니다. (데이터 페칭에 실패할 경우 필요)
redirect : 사용자를 다른 페이지로 보낼 수 있습니다. (데이터 페칭에 실패할 경우 필요한 설정)

getStaticProps(context)와 같은 함수로 매개변수를 추출하여 사용하는 것과 컴포넌트 함수에서의 차이

컴포넌트 함수

컴포넌트 함수에서 매개변수를 추출하면 컴포넌트 내부에서 사용 가능합니다.
추출된 ID 또는 router.query 같은 것들과 일부 백엔드 서버에 요청을 보내 데이터를 가져오기 위함입니다.

해당 과정은 브라우저에서만 이루어집니다.

getStaticProps(context) 따위의 함수

getStaticProps()로 데이터를 준비하여 페이지를 사전 렌더링하게 되면
해당 경우는 서버에서만 이루어집니다.
그리고 getStaticProps는 컴포넌트 함수보다 먼저 실행됩니다.

getStaticProps() 함수가 먼저 실행 ➡️ 컴포넌트 함수 실행

그 이유는 컴포넌트 함수가 페이지를 사전 렌더링하기 위해 실행되는 함수(getStaticProps)라서 그렇다.

따라서 서버상에서 or getStaticProps()로 페이지를 미리 준비하려면 매개변수로의 접근이 필요합니다.
즉, getStaticProps 내부의 동적 경로 세그먼트에 접근하여 매개변수 데이터를 통해 컴포넌트에 대한 데이터를 준비합니다.
그러면 컴포넌트 함수 안에도 동적 세그먼트가 필요한 게 아니면 추출할 필요가 없기 때문입니다.

그러나 데이터 사전 준비는 getStaticProps에서 해야하며, 해당 함수 안에서 미리 필요한 데이터에 접근합니다.

getStaticProps의 비밀

Next.js는 모든 페이지를 사전에 생성합니다.
하지만 예외적으로 동적 페이지에서는 그렇지 않습니다. ([]로 생성된 페이지)

그 이유인 즉슨, 동적 페이지는 하나의 페이지로 취급되지 않고 여러 페이지로 취급받을 수 있기 때문에 사전 생성에 맞지 않습니다.
(예시로 데이터가 다르게 들어가 다른 내용을 가진 페이지를 생성할 것임.)

동적 페이지에서 getStaticProps를 사용하기 위해서는
getStaticPaths라는 함수가 필요하다.

• 아래 함수의 목적 : 동적 페이지의 어떤 인스턴스를 생성할지 Next.js에 알리는 것
• getStaticProps()처럼 객체를 반환하는 것은 동일함.
• 그러나 반환하는 객체 값은 다릅니다.
  (path 키가 있는 객체를 반환해야 하고, 동일한 위치에서 fallback이라는 속성이 필수로 들어가야함.)
  - fallback이 false값일 때는 getStaticPaths가 불러오지 못한 path에 대해서 404페이지로 이동시킨다.
• getStaticPaths()는 동적 페이지의 어떤 구체적인 인스턴스를 사전 생성할지 알려주는 함수라고 할 수 있다.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
    ],
    fallback: false,
  };
}

fallback값이 true일 때, 아래와 같이 코드를 작성해도 에러가 나지 않음을 직접 볼 수 있다.

function ProductDetailPage(props) {
  const { loadedProduct } = props;

  if (!loadedProduct) {
    return <p>로딩중.....</p>;
  }

  return (
    <>
      <h1>{loadedProduct.title}</h1>
      <p>{loadedProduct.description}</p>
    </>
  );
}

export async function getStaticProps(context) {
 //...생략 
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { pid: "p1" } },
    ],
    fallback: true,
  };
}

fallback: true일 때 페이지 방문 시, 로딩되는 값이 유효할 수 있도록 Next.js에 요청해준다.
하지만 사전에 페이지가 생성되는 것은 아니고, 요청이 next.js에서 서버에 도달하는 순간의 시점에 생성됩니다.

➡️ fallback: true을 이용하여 방문율이 높은 페이지를 사전 생성할 수 있고, 방문율이 낮은 페이지는 사전 생성 하지 않음으로 자원을 효율적으로 사용할 수 있습니다.

에러처리로 getStaticProps에서 사전 생성한 데이터인 loadedProduct로 데이터를 불러오기 전이라 페이지가 생성되는 중이라면 if문으로 핸들링 할 수 있습니다.
(React - useEffect 처럼)