Next.js의 정해진 함수(SSG, SSR)

최종 수정 : 2024-05-31

 

정적 생성과 서버사이드 렌더링은 같이할 수 없다.

서버사이드 렌더링해야 하는 경우 외에는, 정적 생성 전략으로 적용하는 것이 좋다.

---

정적 생성(Static Generation)

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

 

# 함수

getStaticProps()

정적 생성할 때 필요한 데이터를 받아와 렌더링 하고 싶을 때 사용하고 export 하면 된다. 객체의 props 프로퍼티를 넘겨줄 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() 라는 함수를 구현하고 export해서 정해줄 수 있다.


getStaticPaths() 함수에서는 리턴 값으로 객체를 리턴하는데, paths 라는 배열에서 각 페이지에 해당하는 정보를 넘겨줄 수 있다. 그리고 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라고 지정했다면, 필요한 데이터가 존재하지 않을 수 있기 때문에 적절한 예외처리를 해줘야 한다. { notound: 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()

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 (
    <ProductsList products={products} />
  );
}