Next.js_22_프리렌더링 총 정리

프리 렌더링(Pre-rendering)

웹 브라우저가 페이지를 로딩하기 이전에 렌더링

• 정적 생성(Static Generation)

• 서버사이드 렌더링(Server-side Rendering)

  Next.js에서는 기본적으로 모든 페이지를 정적 생성

정적 생성(Static Generation)

프로젝트를 빌드하는 시점에 미리 HTML을 렌더링

getStaticProps() 함수

정적 생성할 때 필요한 데이터를 받아와서 렌더링하고 싶다면
getStaticProps() 함수를 구현하고 export하면 된다.

export async function getStaticProps() {
  const res = await axios('/products/');
  const products = res.data;
  return {
    props: {
      products,
    },
  };
}
export default function Home({ products }) {
  return (
    <ProductList products={products} />
  );
}

getStaticPaths() 함수

/pages/products/[id].js 와 같이 다이나믹 라우팅을 하는 페이지를 정적 생성을 할 때에는 어떤 페이지를 정적 생성할지 지정해줘야 한다.

getStaticPaths() 라는 함수를 구현하고 export해서 정해줄 수 있다.

getStaticPaths() 함수에서는 리턴 값으로 객체를 리턴하는데,
paths 라는 배열에서 각 페이지에 해당하는 정보를 넘겨줄 수 있다.

예를 들어서 id 값이 '1'인 페이지를 정적 생성하려면
{ params: { id: '1' } }과 같이 쓸 수 있다.

그리고 fallback 이라는 속성을 사용해서 정적 생성되지 않은 페이지를 처리해 줄 것인지 지정할 수 있다.

fallback: true 라고하면 생성되지 않은 페이지로 접속했을 때
getStaticProps() 함수를 실행해 페이지를 만들어서 보여준다.

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

getStaticProps() 함수에서는 context 파라미터를 사용해서
필요한 Params(context.params) 값이나
쿼리스트링(context.query) 값을 참조할 수 있었다.

그리고 fallback: true라고 지정했다면,

필요한 데이터가 존재하지 않을 수 있기 때문에 적절한 예외처리를 해야 하는데
{ notFound: true } 를 리턴하면 데이터를 찾을 수 없을 때 404 페이지로 이동시킬 수 있다.

export async function getStaticProps(context) {
  const productId = context.params['id'];
  let product;
  try {
    const res = await axios(`/products/${productId}`);
    product = res.data;
  } catch {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      product,
    },
  };
}

만약 fallback: true 를 설정했다면
getStaticProps() 를 실행하는 동안 보여 줄 로딩 페이지를 구현해야 하는데
페이지 컴포넌트에서 필요한 데이터가 존재하지 않을 때를 처리해 주면 된다.

export default function Product({ product }) {
  if (!product) {
    return <>로딩 중 ...</>
  }
  return <>상품 이름: {product.name}</>;
}

서버사이드 렌더링(Server-side Rendering)

Next.js 서버에 리퀘스트가 도착할 때마다 페이지를 렌더링해서 보내주는 방식

getServerSideProps() 함수를 구현하고 export하면 된다.
이때 리턴 값으로는 객체를 리턴한다.

정적 생성때와 마찬가지로
props 프로퍼티로 Props 객체를 넘겨주면
페이지 컴포넌트에서 받아서 사용할 수 있다.

export async function getServerSideProps() {
  const res = await axios('/products/');
  const products = res.data;
  return {
    props: {
      products,
    },
  };
}
export default function Home({ products }) {
  return (
    <ProductList products={products} />
  );
}