NextJS와 프리렌더링

프리 렌더링(Pre-rendering)

프리 렌더링(Pre-rendering)은 웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 걸 말한다. 크게 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)으로 나뉘는데, Next.js에서는 기본적으로 모든 페이지를 정적 생성한다.

정적 생성(Static Generation)

정적 생성이란, 프로젝트를 빌드하는 시점에 미리 HTML을 렌더링하는 걸 말한다. 기본적으로 Next.js에서는 모든 페이지를 정적 생성한다.

getStaticProps() 함수

정적 생성할 때 필요한 데이터를 받아와서 렌더링하고 싶다면getStaticProps() 함수를 사용한다. 객체의 props 프로퍼티로 넘겨줄 Props 객체를 지정하고, 이것을 페이지 컴포넌트에서 사용할 수 있다.

getStaticPaths() 함수

다이나믹 라우팅을 하는 페이지를 정적 생성을 할 때에는 어떤 페이지를 정적 생성할지 지정해줘야 하는데, 이 때 getStaticPaths() 라는 함수를 사용한다.

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

그리고 fallback 이라는 속성을 사용해서 정적 생성되지 않은 페이지를 처리해 줄 것인지 지정할 수 있다. fallback: true 라고하면 생성되지 않은 페이지로 접속했을 때 getStaticProps() 함수를 실행해 페이지를 만들어서 보여준다. 이 때 getStaticProps() 를 실행하는 동안 보여 줄 로딩 페이지를 구현해야 한다. 또한 필요한 데이터가 존재하지 않을 수 있기 때문에 적절한 예외처리를 해야 하는데, { notFound: true } 를 리턴하면 데이터를 찾을 수 없을 때 404 페이지로 이동시킬 수 있다.

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

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,
    },
  };
}

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

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

Next.js 서버에 리퀘스트가 도착할 때마다 페이지를 렌더링해서 보내주는 방식입니다. getServerSideProps() 함수를 이용하며, 이때 리턴 값으로는 객체를 리턴한다. 정적 생성때와 마찬가지로 props 프로퍼티로 Props 객체를 넘겨주면 페이지 컴포넌트에서 받아서 사용한다.

export async function getServerSideProps() {
  const res = await axios('/api');
  const data = res.data;

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <DataList data={data} />
  );
}

서버사이드 렌더링을 고려하면 좋은 경우

• 항상 최신 데이터를 보여 줘야 하는 경우
• 데이터가 자주 바뀌는 경우
• 리퀘스트의 데이터를 사용해야 하는 경우 (예: 헤더, 쿼리스트링, 쿠키 등)
  그 외에 특별한 이유가 없다면 되도록 정적 생성을 하는 걸 권장한다.

출처: 코드잇 강의 'Next.js로 웹사이트 만들기'