Next.js 프리렌더링 쓰는법

페이지 라우터 기준

프리 렌더링(Pre-rendering)

웹브라우저가 페이지를 로딩하기 이전에 렌더링을 하는 것을 말한다. 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)으로 나뉜다.

정적 생성(Static Generation)

getStaticProps()함수
정적 생성할 때 필요한 데이터를 받아서 렌더링하려면 getStaticProps()함수를 이용하면 된다. props를 키로, 넘겨줄 데이터를 담고 있는 객체를 값으로 갖는 객체를 만들어서 반환하면 된다.

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()함수를 사용하면 된다.
getStaticPaths는 객체를 리턴하는데 paths와, fallback이라는 프로퍼티를 가지고 있다. paths는 배열을 값으로 가지고 각 페이지에 해당하는 정보를 넘겨준다. 예를 들어 id가 '1'인 페이지를 정정생성하려면 { params: {id: '1'} }과 같이 쓸 수 있다. fallback은 정적 생성되지 않은 페이지를 처리해 줄 것인지 지정해 줄 수 있다. fallback: false는 paths에 정의된 경로만 빌드한다. 그외 경로로 들어오면 404페이지를 fallback: true를 주면 생성되지 않은 페이지로 접속했을 때 getStataticProps() 함수를 실행해 서버에서 페이지를 만들어서 보여준다. 페이지가 보여지기 전까지는 로딩화면을 보여준다. fallback: 'blocking'인 경우는 true와 비슷하지만 페이지가 생성되기전까지 로딩화면을 보여주지 않고 사용자를 블로킹하고 있다가 생성이 완료된후 즉시 완성된 페이지를 보여준다.

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

로딩 페이지 예시

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

이 함수에서는 context파라미터를 사용해서 필요한 parmas과 query string 값을 참조 할 수 있다(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,
    },
  };
}

서버사이드 렌더링

getServerSideProps()함수
Next.js 서버에 리퀘스트가 도착할 때마다 페이지를 렌더링해서 보여주는 방식이다.
getServerSideProps()함수를 이용하면 된다. 리턴값으로는 객체를 리턴하는데, 정적 생성과 동일하게 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} />
  );
}

코드잇 - 공부내용 정리